Problem/Motivation

It seems Youtube videos don't use a template and instead rely on the $element[$delta] in src/Plugin/Field/FieldFormatter/AbleplayerRemoteVideoFormatter.php around line 120. This makes output customization difficult, without modifying the source code. For example if one wanted to add a special attribute to the video tag when Youtube was being used.

Steps to reproduce

  1. Require the module via composer per instructions.
  2. Delete its "templates" folder entirely.
  3. Enabled the module per instructions.
  4. Enable display for remote video per instructions.

Even with "templates" directory removed entirely, AbleplayerRemoteVideoFormatter.php will format the markup for Youtube.

Proposed resolution

Please provide a template and theme reference for a twig file instead of:

'#tag' => 'video',
'#attributes' => [...

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork ableplayer-3548775

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

jim_b created an issue. See original summary.

jim_b’s picture

jim_b commented
Issue summary: View changes
themusician’s picture

themusician commented

Thank you for the idea.

It looks like AbleplayerRemoteVideoFormatter.php declares a field formatter, ableplayer_remote_video that we never used.

If we make that file and name it ableplayer-remote-video.html.twig and place it in /templates/ perhaps something like this would work.

{#
/**
* @file
* Default theme implementation to display the file entity as a video tag.
*
* Available variables:
* - attributes: An array of HTML attributes, intended to be added to the
*   video tag.
* - files: And array of files to be added as sources for the video tag. Each
*   element is an array with the following elements:
*   - file: The full file object.
*   - source_attributes: An array of HTML attributes for to be added to the
*     source tag.
*
* @ingroup themeable
*/
#}

//check if this is a Vimeo video and attach the necessary library
{% if {{attributes.data-youtube-id is empty %}
{{ attach_library('ableplayer/ableplayer-vimeo') }}
{% endif %}
{{ attach_library('ableplayer/ableplayer') }}
<video data-able-player {{ attributes }} >

Back in the AbleplayerRemoteVideoFormatter.php file we would need to remove

     '#type' => 'html_tag',
     '#tag' => 'video',

and

'#attached' => [
     'library' => [
        'ableplayer/ableplayer',
       'ableplayer/ableplayer-vimeo',
            ],
          ],

from both the YouTube and Vimeo provider checks.

Maybe that would work.

carlygerard made their first commit to this issue’s fork.

themusician’s picture

themusician commented

Hi jim_b,

Carly and I have this working on the following branch, https://git.drupalcode.org/project/ableplayer/-/tree/3548775-provide-a-y.... I inadvertently messed up the fork process so it a standard branch off of the project.

The new twig template ends up looking like this:

{#
/**
* @file
* Theme implementation to display remote video with AblePlayer.
*
* Available variables:
* - attributes: HTML attributes for the video tag.
* - youtube_id: YouTube video ID.
* - youtube_desc_id: YouTube audio description video ID.
* - youtube_sign_src: YouTube sign language video ID.
* - vimeo_id: Vimeo video ID.
* - vimeo_desc_id: Vimeo audio description video ID.
*
* @ingroup themeable
*/
#}
{{ attach_library('ableplayer/ableplayer') }}

{% if youtube_id %}
  <video data-able-player
         data-youtube-id="{{ youtube_id }}"
         {% if youtube_desc_id %}data-youtube-desc-id="{{ youtube_desc_id }}"{% endif %}
         {% if youtube_sign_src %}data-youtube-sign-src="{{ youtube_sign_src }}"{% endif %}
         {{ attributes }}>
  </video>
{% elseif vimeo_id %}
{{ attach_library('ableplayer/ableplayer-vimeo') }}

  <video data-able-player
         id="{{ attributes.id }}"
         data-vimeo-id="{{ vimeo_id }}"
         {% if vimeo_desc_id %}data-vimeo-desc-id="{{ vimeo_desc_id }}"{% endif %}
         {{ attributes }}>
  </video>
{% endif %}

We are testing internally, but if you or others are able to give this a test as well by pulling the branch, that would be much appreciated.

themusician’s picture

themusician commented
Version: 3.2.2 » 3.x-dev
Status: Active » Fixed

Merged into the dev branch. Please reopen if any edge cases are discovered.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.