**edit 2**
Looking back on the YT iFrame API docs, it says "The first parameter specifies either the DOM element or the id of the HTML element", so I tried new YT.Player(document.getElementsByClassName('cboxIframe')[0]); (that selector returns a valid DOM element), but the result is the same as when I add an id "Failed to execute 'postMessage' on 'DOMWindow'..." and an incomplete Player object.
****

**edit**
It seems the issue is with the way colorbox creates the iframe from the a tag with youtube_colorbox generates. Unless anyone has solved this problem, I'll leave this here in case anyone runs across it.
****

Per the youtube iFrame API, I have no problem using player = new YT.Player('some-dom-id'); to get access to the API, on a youtube field when it's set to render the iFrame.
But, when it's a thumbnail linked to Colorbox, that same code results in player being an incomplete object and no API interaction is possible. enablejsapi=1 is set in both cases.
I've seen this before where two bits of code try to create the JS player, but I can't find any reference in your code (nor colorbox's) that might conflict.
Thoughts?

The standard iFrame results in an element that has an id assigned, while the in the Colorbox it has no id but has a name attribute. (Which is odd as name's are usually used in forms).

Attempting to create the player from the name attribute fails with an incomplete Player object.

In my code I used jQuery to give the iframe in the colorbox an ID field, but that didn't help.

Also of note is it generates tons of these errors in the console IF a Player object is attempted with a new id:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://youtube.com') does not match the recipient window's origin ('https://www.youtube.com').

The code for the colorbox version as initially rendered is as a link
<a href="https://youtube.com/embed/xxxx?width=640&amp;height=480&amp;autoplay=0&amp;loop=0&amp;showinfo=0&amp;controls=1&amp;autohide=0&amp;iv_load_policy=0&amp;iframe=1&amp;rel=0&amp;modestbranding=1&amp;enablejsapi=1&amp;origin=http%3A//mysite.local&amp;wmode=opaque" class="colorbox-load youtube-field-player init-colorbox-load-processed cboxElement" id="youtube-field-player--2" target="_blank"><img typeof="foaf:Image" src="/sites/default/files/styles/video_landing_video_thumb/public/youtube/xxx.png?itok=bLo_Mb_0" width="450" height="251" alt="Embedded thumbnail"></a>

The module code sets $display['settings']['colorbox']['parameters']['iframe'] = TRUE;

the colorbox_load.js takes over and creates the iframe.

normal iframe version:
<iframe id="youtube-field-player--7" class="youtube-field-player" width="100%" height="100%" src="https://www.youtube.com/embed/xxxxxxx?rel=0&amp;modestbranding=1&amp;enablejsapi=1&amp;origin=http%3A//mysite.local&amp;wmode=opaque&amp;showinfo=0&amp;controls=0&amp;autohide=1&amp;iv_load_policy=3" title="Embedded video for Family Fun in Williamsburg" frameborder="0" allowfullscreen=""></iframe>

resulting colorbox version:
<iframe frameborder="0" name="1456897956064" src="https://youtube.com/embed/xxxxx?width=640&amp;height=480&amp;autoplay=0&amp;loop=0&amp;showinfo=0&amp;controls=1&amp;autohide=0&amp;iv_load_policy=0&amp;iframe=1&amp;rel=0&amp;modestbranding=1&amp;enablejsapi=1&amp;origin=http%3A//mysite.local&amp;wmode=opaque" class="cboxIframe"></iframe>

Comments

Todd Zebert created an issue. See original summary.

todd zebert’s picture

todd zebert commented
Issue summary: View changes
todd zebert’s picture

todd zebert commented
Issue summary: View changes

  • guschilds committed 7591e3a on 7.x-1.x 
    Issue #2679231: Fixed Issue getting creating YT.Player object for videos...
guschilds’s picture

guschilds commented
Status: Active » Fixed

Todd,

I've pushed something to the 7.x-1.x that will fix this for you.

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://youtube.com') does not match the recipient window's origin ('https://www.youtube.com').

This error was caused by the iframe's URL not containing "www". That is what I added in the commit. It is already added to the non-Colorbox iframes in theme_youtube_video() so I'm not sure why it wasn't here too.

I was able to create a YT.Player object from an iframe video within a Colorbox window by adding //www.youtube.com/iframe_api to the page, along with a custom JS file that contained:

(function($) {
  Drupal.behaviors.cboxIframeTest = {
    attach: function(context) {

      var $cboxIframe = $('.cboxIframe');
      var player;

      if ($cboxIframe.length) {
        player = new YT.Player($cboxIframe[0], {
          events: {
            'onReady': onPlayerReady,
          }
        });
      }

      function onPlayerReady(event) {
        player.playVideo();
      }

    }
  };
})(jQuery);

That code is likely not ideal (and using it for autoplay isn't worth it because there is a field option for that), but it worked! If interested, please checkout the latest 7.x-1.x branch and have another shot. Thanks!

Status: Fixed » Closed (fixed)

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