Problem/Motivation

While working on #2998091-66: Remote videos overflow their containing element, the question was raised if we should allow JavaScript to be attached inside the oEmbed content iframe. That issue disallowed it in order to keep the scope limited, but we agreed to open this follow-up issue to discuss and possibly implement the ability to attach JavaScript too.

Themers need a way to interact and control oEmbed content. For example, if there is a play button next to a Vimeo video the JavaScript on the parent page must send the play request through the parent iframe to the child iframe. The child iframe page (media-oembed-iframe.html.twig) must be able to have JavaScript in order to receive the play request from the parent iframe and send it to the child iframe. (It is not possible use Window.postMessage() through multiple iframes.) Both Drupal JavaScript and external JavaScript should be allowed since the provider’s JavaScript API (//player.vimeo.com/api/player.js in this example) will be needed.

Proposed resolution

This is possible once #3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments lands, at which point we can document how to achieve this functionality.
Most likely in the Twig file.

Remaining tasks

TBD.

User interface changes

TBD, but probably none.

API changes

TBD, probably none.

Data model changes

None.

Release notes snippet

TBD

Comments

phenaproxima created an issue. See original summary.

phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Issue summary: View changes
phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Title: [PP-1] Allow attachment of JavaScript inside the oEmbed iframe » Allow attachment of JavaScript inside the oEmbed iframe
Status: Postponed » Active

The blocker is in, so this is no longer postponed.

rajab natshah’s picture

rajab natshah
he/him
commented

Thanks for opening this issue
I think the final media-oembed-iframe.html.twig could look as followes:

{#
/**
 * @file
 * Default theme implementation to display an oEmbed resource in an iframe.
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html>
  <head>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token|oembed_provider }}">
  </head>
  <body style="margin: 0">
    {{ media|raw }}
    <js-bottom-placeholder token="{{ placeholder_token|oembed_provider_raw }}">
  </body>
</html>

I'm posing a spaghetti code which still under optimization for a Case Scenario example, which we require
autoplay a video when we click on the cover image, or autoplay when the slide goes to the next slide.

{#
/**
 * @file
 * Default theme implementation to display an oEmbed resource in an iframe.
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html>
  <head>
    <css-placeholder token="{{ placeholder_token }}">
    <script src="//youtube.com/player_api"></script>
    <script src="//player.vimeo.com/api/player.js"></script>
    <script>

      function ready(fn) {
        if (document.readyState != 'loading'){
          fn();
        } else if (document.addEventListener) {
          document.addEventListener('DOMContentLoaded', fn);
        } else {
          document.attachEvent('onreadystatechange', function() {
            if (document.readyState != 'loading')
              fn();
          });
        }
      }

      ready(function() {
        var media_iframe = document.querySelector('iframe');
        media_iframe.setAttribute('id', 'media-oembed-iframe');

        var player_confgured = false;
        var youtube_player;
        var vimeo_player;
  
        function actionProcessor(evt) {

          // Manage Youtube video.
          if (evt.data === "play_youtube") {
            var youtube_iframe = document.querySelector('iframe[src*="youtube.com"]');
            if (youtube_iframe !== undefined && youtube_iframe.src !== undefined) {
              
              if (!player_confgured) {
                var youtubeURL = String(youtube_iframe.src);
                youtubeURL = youtubeURL.replace(/autoplay=0/gi, "autoplay=1");
                youtubeURL = youtubeURL.replace(/controls=0/gi, "controls=1");
                youtubeURL = youtubeURL + "&enablejsapi=1";
                youtube_iframe.src = youtubeURL;
                youtubeURL = undefined; 

                youtube_player = new YT.Player(youtube_iframe.id, {
                  events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                  }
                });
          
                function onPlayerReady(event) {
                  event.target.playVideo();
                }

                function onPlayerStateChange(event) {

                  if (event.data === YT.PlayerState.PLAYING) {
                    youtube_player.isPlaying = true;
                  }
                  else {
                    youtube_player.isPlaying = false;
                  }

                  if (event.data === YT.PlayerState.ENDED) {
                    window.parent.postMessage("ended_youtube", "*");
                    youtube_player.playVideo();
                  }
                }

                player_confgured = true;
              }

            }
          }
          else if (evt.data === "pause_youtube") {
            if (player_confgured) {
              youtube_player.pauseVideo();
            }
          }

          // Manage Vimeo video.
          else if (evt.data === "play_vimeo") {
            if (!player_confgured) {
              var vimeo_iframe = document.querySelector('iframe[src*="vimeo.com"]');
              vimeo_player = new Vimeo.Player(vimeo_iframe);
              vimeo_player.on('ended', function() {
                window.parent.postMessage("ended_vimeo", "*");
                vimeo_player.play();
              });
              player_confgured = true;
            }

             vimeo_player.ready().then(function() {
               vimeo_player.getPaused().then(function(paused) {
                if (paused) {
                  vimeo_player.play();
                }
              });
            });
          }
          else if (evt.data === "pause_vimeo") {
            if (player_confgured) {
              vimeo_player.pause();
            }
          }
        }

        // Setup the event listener for messaging.
        if (window.addEventListener) {
          window.addEventListener("message", actionProcessor, false);
        }
        else {
          window.attachEvent("onmessage", actionProcessor);
        }
      });
    </script>
  </head>
  <body style="margin: 0">
    {{ media|raw }}
  </body>
</html>

autoplay for remote Videos with cover images

Still some other issues. of letting the child iframe send a message of ended to let the slider go to the next slide for example

I think if the issue of sending the provider to the twig is fixed
It could let us have twig for each remote provider with custom JS attache of remote or local libraries.
or other ways of preprocessing.

My questions at this time:

  • How we could let developers organize their js libraries? for more extra/external APIs or custom behaviours for other services like ( Brightcove, Facebook vid, .. twitter, or a custom drupal oembed service )
  • How to flag/filter a library to be only loaded for the selected provider? ( auto logic or manual logic )

when we switch to use <js-placeholder token="{{ placeholder_token }}">

rajab natshah’s picture

rajab natshah
he/him
commented

If we #3044967: Add [Provider name] to the OEmbed Iframe Controller to let themers have the option of knowing which provider in media oembed iframe template or the pre-processor theme suggestion alter
we could use that in something like the following for
filtaring or flaging libraries when we swich to placeholders

    <css-placeholder token="{{ placeholder_token|oembed_provider }}">
    <js-placeholder token="{{ placeholder_token|oembed_provider }}">

{#
/**
 * @file
 * Default theme implementation to display an oEmbed resource in an iframe.
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="{{ base_path }}{{ module_handler_path }}/css/components/oembed-frame.css">
    <script src="{{ base_path }}{{ module_handler_path }}/js/oembed-frame.{{ provider_name }}.js"></script> 
  </head>
  <body style="margin: 0">
    {{ media|raw }}
  </body>
</html>

{{ base_path }}
{{ module_handler_path }}  or {{ theme_handler_path }} 
{{ provider_name }}

We could change to use

# Oembed frame for Youtube video behaviors.
oembed-frame-video-youtube:
  js:
    js/oembed-frame.youtube.js: { }

# Oembed frame for Vimeo video behaviors.
oembed-frame-video-youtube:
  js:
    js/oembed-frame.vimeo.js: { }

with something like 

{{ placeholder_token|oembed_provider }}
wim leers’s picture

wim leers
Location Ghent 🇧🇪🇪🇺
commented
Issue tags: +Needs issue summary update, +JavaScript

This has security and front-end performance implications: it'll result in more JS being loaded on the front end.

I'm also not seeing in the issue summary why this is desirable: what things does it enable that are not possible today?

Finally, I'm assuming we're talking only about Drupal-owned JS, not external JS, right?

phenaproxima’s picture

phenaproxima
he/him
Primary language English
Location Massachusetts
commented
Issue tags: +oembed

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

daniel korte’s picture

daniel korte
he/him/his
Primary language English
Location Brooklyn, NY
commented
Issue summary: View changes
Issue tags: -JavaScript +JavaScript

@Wim Leers I updated the Why in the summary. Hopefully it makes sense.

We need both Drupal-owned JS and external JS to be allowed here.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

osab’s picture

osab commented

Hi!
I want to share enough rough trick to make autoplay video inside child iframe. I hope we can use more correct approach to achieve the same further.
So, the case is we have separate preview image for media video item with custom designed play button. And when we click on the play button we need to open and autostart youtube video. But by default we can to set "autoplay=1" attribute to the parent iframe only and we have to click play button in the second time on the youtube child iframe.
The main idea to solve this problem is to use video code and load youtube in JS directly, instead of using default {{ media|raw }} from media-oembed-iframe.html.twig. It was inspired by https://codepen.io/tutsplus/pen/RRVRro.
Here is detailed description:

- media-oembed-iframe.html.twig:

<!DOCTYPE html>
<html>
  <head>
    <css-placeholder token="{{ placeholder_token }}">

  </head>
  <body style="margin: 0">
   {# {{ media|raw }} #}
  </body>
</html>

- media field template contains our custom button:

        <div{{ item.attributes.addClass('field__item') }}>
          <div class="video-wrapper">
            {{ item.content }}
            <div class="play-button">{{ 'Play'|t }}</div>
          </div>
        </div>

- on the next step we need to prepare video url on media field preprocess hook:
Here we can set different URLs for different providers:

$items = &$variables['items'];

  foreach ($items as &$item) {
    /** @var \Drupal\media\Entity\Media $media */
    $media = $item['content']['#media'];
    // We need to set video code dynamically.
    if ($media !== NULL && $media->hasField('field_media_video_embed_field')) {
      $media_url = $media->get('field_media_video_embed_field')->value;

      if (preg_match('~vimeo\.com/(\d+)(.*)$~i', (string) $media_url, $matches)) {
        $item['attributes']['data_embed_url'] = sprintf('https://player.vimeo.com/video/%s?autoplay=1', $matches[1]);
      }
      elseif (preg_match('~(?:v=|youtu\.be/|youtube\.com/embed/)([a-z0-9_\-]+)~i', (string) $media_url, $matches)) {
        $item['attributes']['data_embed_url'] = sprintf('https://www.youtube.com/embed/%s?rel=0&showinfo=0&autoplay=1', $matches[1]);
      }
    }
  }

- loading child iframe in js by click on play-button:

Video URL with autoplay are in data_embed_url.

$this.find('.play-button').click(function () {
          var $wrapper = $(this).closest('.field__item');
          $wrapper.addClass('video-is-active');

          var $iframe_wrapper = $('.field--name-field-media-video-embed-field iframe', $wrapper);
          var iframe = document.createElement( "iframe" );
          var parent_iframe = $iframe_wrapper.contents().find('body');

          // Creating provider iframe manually to avoid double click Play button.
          iframe.setAttribute("frameborder", "0");
          iframe.setAttribute("allowfullscreen", "");
          iframe.setAttribute("allow", "autoplay; picture-in-picture");

          iframe.setAttribute("src", $wrapper.attr('data_embed_url'));
          parent_iframe.append(iframe);
        });

Hope it will help someone. :)

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Related issues: +#3230547: \Drupal\media\Controller\OEmbedIframeController::render doesn't set a content-type header

There's a bug in how the controller works that is preventing addition of Javascript but also CSS and any cacheability metadata.

#3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments

With that, you could add JS in the preprocess hook like so - example is adding GTM to $variables['#attached'], but you could equally do $variables['#attached']['library'][] = 'some/library';

/**
 * Implements hook_preprocess_media_oembed_iframe().
 */
function YOUR_THEME_preprocess_media_oembed_iframe(array &$variables) {
  if ($variables['resource']->getProvider()->getName() === 'YouTube') {
    $variables['media'] = str_replace('?feature=oembed', '?feature=oembed&enablejsapi=1', (string) $variables['media']);
  }
  $variables['#attached']['html_response_attachment_placeholders']['scripts'] = '<js-placeholder token="' . $variables['placeholder_token'] . '">';
  $variables['#attached']['html_response_attachment_placeholders']['head'] = '<head-placeholder token="' . $variables['placeholder_token'] . '">';
  // Add GTM.
  \Drupal::service('google_tag.container_manager')->getScriptAttachments($variables);
}
larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Related issues: -#3230547: \Drupal\media\Controller\OEmbedIframeController::render doesn't set a content-type header +#3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments
larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

In my opinion, we should just fix that bug, and then close this as it would be possible with the existing tools.

ac’s picture

ac
Primary language English
Location Perth
commented

@larowlan Could you provide an example of how to load a library using this method? I have applied your patch in the other issue and can rewrite the $variables['media'] string but am not able to load a library in the iframe.

Looking further into it, my library is being loaded using $variables['#attached']['library'][] = 'foo/bar', however only the CSS is being rendered, not the JS. Any suggestions on how to get that to load?

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Yeah the hook above + this in the twig template:

in the <head> element

    <js-placeholder token="{{ placeholder_token }}">
ac’s picture

ac
Primary language English
Location Perth
commented

Thanks. That is what I was doing but with no luck. Have you successfully done this? I am guessing your example is likely a real implementation.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Yeah hook + patch + twig file is working for me in a production site

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

I also have the patch from #3230547: \Drupal\media\Controller\OEmbedIframeController::render doesn't set a content-type header on this project, that might be significant, but I doubt it

ac’s picture

ac
Primary language English
Location Perth
commented
  1. #3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments test coverage, the library only contains a CSS file, not a JS file. Have you successfully loaded a JS file via a library this way?
  2. Including #3230547: \Drupal\media\Controller\OEmbedIframeController::render doesn't set a content-type header didn't seem to change anything

This is what I have (and many other variations on this)

foo.theme

function foo_preprocess_media_oembed_iframe(array &$variables) {
  $resource = $variables['resource'];
  if ($resource->getProvider()->getName() === 'YouTube') {
    // We are rendering a YouTube video, so modify the URL of the video so that it only shows related videos from the same channel.
    // The video's markup is only available as a string, so we need to use str_replace() to modify the URL.
    $variables['media'] = str_replace('?feature=oembed', '?feature=oembed&rel=0&modestbranding=1&autohide=1&controls=0', (string) $variables['media']);

    $variables['#attached']['library'][] = 'foo/play';
  }
  $variables['#attached']['html_response_attachment_placeholders']['scripts'] = '<js-placeholder token="' . $variables['placeholder_token'] . '">';
  $variables['#attached']['html_response_attachment_placeholders']['head'] = '<head-placeholder token="' . $variables['placeholder_token'] . '">';
}

foo.libraries.yml

play:
  version: VERSION
  js:
    js/play.js: {}
  css:
    component:
      css/play.css: {}

templates/media/media-oembed-iframe.html.twig 

/**
 * @file
 * Default theme implementation to display an oEmbed resource in an iframe.
 *
 * @ingroup themeable
 */
#}
<!DOCTYPE html>
<html>
  <head>
    <css-placeholder token="{{ placeholder_token }}">
    <js-placeholder token="{{ placeholder_token }}">
  </head>
  <body style="margin: 0">
    {{ media|raw }}
  </body>
</html>

When the oembed item is rendered this is what I get in the head of the iframe

<head>
  <link rel="stylesheet" media="all" href="/core/modules/media/css/oembed.frame.css?qz8vzx">
  <link rel="stylesheet" media="all" href="/sites/sitename.com/themes/foo/css/play.css?qz8vzx">
</head>

I was expecting to also see js/play.js loaded.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Yeah, that's consistent with how I've got it working 🤔

ac’s picture

ac
Primary language English
Location Perth
commented

Very odd. Are you running any other core patches?

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Quite a few, but none that stand out as being relevant.

If you're on slack, feel free to ping me there (same username) and I can share a URL where I've got it running - I just checked and it does add the JS from Google Tag manager (which is what I was trying to achieve).

ac’s picture

ac
Primary language English
Location Perth
commented

Follow up to #22 with a working solution:

foo.libraries.yml needs to force the js to load in the header and not the default which is the footer:

play:
  version: VERSION
  header: true
  js:
    js/play.js: {}
  css:
    component:
      css/play.css: {}

Doing this along with the rest of #22 now lets me load both CSS and JS from a theme library in the oembed iframe. Thanks to @larowlan for the help and guidance.

ac’s picture

ac
Primary language English
Location Perth
commented

This also means that this issue can probably be closed (I will let someone else do that) and #3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments should be committed. In doing this we have a clean way of adding JS to the oembed iframe.

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Title: Allow attachment of JavaScript inside the oEmbed iframe » [PP-1] Document how to attachment JavaScript inside the oEmbed iframe
Category: Feature request » Task
Issue summary: View changes
Status: Active » Postponed
Issue tags: -Needs issue summary update

Rather than closing this issue, let's make it about documenting how to achieve this.

Postponing on #3230772: OembedMediaController doesn't properly bubble cacheability metadata/attachments

mstrelan’s picture

mstrelan commented
Title: [PP-1] Document how to attachment JavaScript inside the oEmbed iframe » Document how to attachment JavaScript inside the oEmbed iframe
Status: Postponed » Active

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.