Question

I am attempting to hide a DIV once a embedded Youtube video is finished. My platform is Drupal 7.x an I am using JQuery to show and hide the div. I am having troubles getting the onYouTubePlayerReady function to fire which prevents all this from happening. All files are on my webserver, I am not trying this locally as YouTube explains it does not work locally ( http://goo.gl/5qeKC )

My head section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://dev.mydomain.com/mytheme/site/sites/all/themes/mytheme/js/hfbusiness.js?m4hr22"></script>

In the hfbusiness.js file I have the following (this file is loading and working as I can fire a javascript alert which displays):

function onYouTubePlayerReady(id) {
    console.log("onYouTubePlayerReady() Fired!");
    var player = $("#youtube_player").get(0);
  }

Index.php contains:

<div class="marketing_video">
<iframe id="ytplayer" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/hIaqCG8O5uU?version=3&enablejsapi=1&rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

The video shows and plays without a problem with the defined options in the iframe. However, the YouTubePlayerReady function is never fired. I am beating my head against the wall on this, so far I have only accomplished a headache.

Thank you for any help.

Answer 1

I was able to get around the problem by using swfobject.js instead of the iFrame. I am wondering if the iFrame would let me do the same if I figured out a way to allowScriptAccess as below. If anyone knows the answer to this question, I would still appreciate an answer.

In my index file:

<script type="text/javascript">
    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/hIaqCG8O5uU?enablejsapi=1&playerapiid=ytplayer&version=3", "ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

hfbusiness.js

var $hfjq = jQuery.noConflict()

function onYouTubePlayerReady(id) {
    var player = document.getElementById("myytplayer");
    player.addEventListener('onStateChange', 'playerState');
}

function playerState(state) {
    if(state == 0) {
        $hfjq(".marketing_video").hide();
    }
}