The changes introduced in #1368818: HTTPS (SSL) support for YouTube player. specified to use always HTTPS as the protocol in Media Youtube iframes.

The problem is that using YouTube's iframe JS API (https://developers.google.com/youtube/iframe_api_reference) with existing iframes does not work if you specify an HTTPS url while using HTTP in your website.

This is the code I'm using to test this:

function my_module_preprocess_media_youtube_video(&$vars) {
  if ($vars['options']['enablejsapi']) {
    drupal_add_js('//www.youtube.com/iframe_api', 'external');
    drupal_add_js(drupal_get_path('module', 'my_module') . '/my_module_media_youtube.js');
  }
}

And in the JS:

var players = {};

function onYouTubeIframeAPIReady() {
  (function ($) {
    $('.media-youtube-player').each(function() {
      var player = new YT.Player(this.id, {
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
      players[this.id] = player;
    });
  })(jQuery);
}

function onPlayerReady(event) {
  console.log('onPlayerReady');
  event.target.playVideo();
}

function onPlayerStateChange(event) {
  console.log('onPlayerStateChange');
}

This works if I change HTTPS to HTTP in media_youtube iframes.

CommentFileSizeAuthor
#12 media-youtube-protocol-formatter-1768362-11.patch6.76 KBRobW
#11 media-youtube-protocol-formatter-1768362-11a.patch6.94 KBjherencia
#8 media-youtube-protocol-formatter-1768362-8a.patch6.78 KBRobW
#6 1768362-6-am.patch6.4 KBjherencia
#6 1768362-6.patch5.86 KBjherencia
#1 1768362-1.patch785 bytesjherencia
#1 1768362-1-am.patch1.17 KBjherencia

Comments

jherencia’s picture

jherencia commented
StatusFileSize
new 1768362-1-am.patch1.17 KB
new 1768362-1.patch785 bytes

For the record, this is the patch that fixes my problems.

RobW’s picture

RobW commented
Title: Youtube iframe JS API does not work over HTTP because HTTPS is used always in the iframe » Add http/s/relative protocol options to fix protocol handling for js API and email/rss; choose https or relative as default

OK, we can fix this.

See #1368818: HTTPS (SSL) support for YouTube player. for the reasoning against using protocol relative urls. TL;DR, they break if viewed outside of a web browser context, e.g., RSS and email applications. Caching prevents us from using the site's http/s variable.

In Media: Vimeo, we addressed this with a formatter choice: http://drupal.org/node/1715438#comment-6315932. This isn't ideal because it takes up a lot of space in the formatter options and isn't global for the site. But M:YT and M:V don't have global config screens right now and I'd prefer to keep it that way.

I think the best compromise is adding a "specify protocol" checkbox to the video formatter that expands to show radios for http, https, and //. I'm not sure if content in email applications or using the js API is more common: the default should serve whichever is. Feedback needed before I code this up.

RobW’s picture

RobW commented

After giving this some thought, I think we should:

  1. Make the default protocol relative.
  2. Add a new "Specify protocol" checkbox as described above.

For general use, it seems like protocol relative urls solve a wide range of issues. If a user is creating an RSS feed they should use the RSS view mode, and specify a non-relative protocol there. Same with content emails. There won't be any js API manipulation when content is viewed in an RSS feed, so no worry about breaking API integration.

jherencia’s picture

jherencia commented
Assigned: Unassigned » jherencia
Status: Active » Needs work

Ok, let me do this.

jherencia’s picture

jherencia commented
StatusFileSize
new 1768362-6.patch5.86 KB
new 1768362-6-am.patch6.4 KB
jherencia’s picture

jherencia commented
Assigned: jherencia » Unassigned
Status: Needs work » Needs review

The patch commited contains the aproach described in #4, I've added a checkbox so normal users do not have to see the select.

It contains the removal of some trailing spaces.

RobW’s picture

RobW commented
StatusFileSize
new media-youtube-protocol-formatter-1768362-8a.patch6.78 KB

Nice work. I made a few changes:

  • Changed label and description wording
  • Fixed #states handling
  • Changed protocols from a select list to radios
  • Changed default protocol (when "specify protocol" is checked) to https

I think it's looking pretty good.

jherencia’s picture

jherencia commented
Status: Needs review » Reviewed & tested by the community
jherencia’s picture

jherencia commented
Status: Needs review » Needs work

I've found that

$variables['url'] = url(...., array(...., 'https' => TRUE));

is still in.

jherencia’s picture

jherencia commented
Status: Needs work » Needs review
StatusFileSize
new media-youtube-protocol-formatter-1768362-11a.patch6.94 KB
RobW’s picture

RobW commented
Status: Reviewed & tested by the community » Needs work
StatusFileSize
new media-youtube-protocol-formatter-1768362-11.patch6.76 KB

Right. API says: "If not defined, the current scheme is used, so the user stays on http or https respectively", so removed. Easier to take it out than to add logic.

jherencia’s picture

jherencia commented

Alright, I've tested and every thing works right.

RobW’s picture

RobW commented
Status: Needs work » Fixed

Thanks for the great collaboration. Committed: http://drupalcode.org/project/media_youtube.git/commit/02be68f.

Status: Fixed » Closed (fixed)

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