3

I have a list of YouTube videos on my website and this is what each list item looks like:

<div class="video_item" id="<YouTubeVideoID>"> 
    // video thumbnail and information
</div>

If a user clicks on one of these video items, a panel drops down and SHOULD load the API and show the video player, once the panel has completed its slide action:

$(document).ready(function(e) {
    $('.video_item').live('click', function() {
        var vid_id = $(this).attr('id');
        if (vid_id) {
            $("html").animate({ scrollTop: $('#main').offset().top-20 }, 1000, function() {
                setTimeout(function() {
                    $('.video_drop_panel_wrap').slideDown('slow', function() {

                        var tag = document.createElement('script');
                        tag.src = "http://www.youtube.com/iframe_api";
                        var firstScriptTag = document.getElementsByTagName('script')[0];
                        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                        var player;
                        function onYouTubeIframeAPIReady() {
                          player = new YT.Player('youtube_player', {
                            height: '371',
                            width: '570',
                            videoId: vid_id,
                            events: {
                              'onReady': onPlayerReady
                            }
                          });
                        }

                        function onPlayerReady(event) {
                          event.target.playVideo();
                        }
                    });
                },1000);
            });
        }
    });
});

The problem is, it won't show the player and I don't receive any errors in my JS developer console. I have tested the API and the player without all the slide down panels and does work — just not where I want it to. I'm not sure if it's a DOM problem or something other than that. If anybody can spot what I have done wrong, I would appreciate a slap... oh and tell me what was wrong too.

2 Answers 2

3

The error occurs because your onYouTubeIframeAPIReady() doesn't exist in the global scope, it only exists inside of the $('.video_drop_panel_wrap').slideDown('slow', function() {...}) . The lazy loading of the api is equivalent to placing it inside of <script> tags from a scope point of view so it searches for a global function.

You could refactor your code so that when onYouTubeIframeAPIReady() fires it points to information about the video you wish to load.

Roughly once the api is loaded you end up with

<script> 
       //Youtube api stuff
         (function(){
             //Do Stuff
             onYouTubeIframeAPIReady();
         })();
</script>
<script>
       $(document).ready(function(){'Your Stuff Here'})
</script>

So when the API ready call is made it isn't aware of the context from which it came because it originates from its own, separate function.

A crude solution could be to change the code from the line underneath var player to

onYouTubeIframeAPIReady = function(){
  player = new YT.Player('youtube_player', {
    height: '371',
    width: '570',
    videoId: vid_id,
    events: {
      'onReady': onPlayerReady
    }
  });
}

Because it has been defined without using a var statement the variable will be created in the global scope if it is unable to find a variable of the same name in the scope chain. onPlayerReady does not need the same treatment because it exists when onYouTubeIframAPIReady is created (local scope).

4
  • I thought the API was being called at line var tag = document.createElement('script'); which calls the onYouTubeIframeAPIReady() function. Surely, that's in the global scope, as both the function and API creator are in document.ready? Oct 29, 2012 at 3:03
  • Like other functions, the variables defined inside of $(document).ready(function(){...}) only exist within the function.
    – Crazometer
    Oct 29, 2012 at 3:18
  • After playing around a bit, I now understand what you are trying to explain to me. TBH, I'm not sure this API method is the best for my situation. I have just used the SWF version and works much better. I appreciate your patience though and will accept the answer, as it is correct. Oct 29, 2012 at 3:26
  • Thanks. I made the exact same mistake when starting out too.
    – Crazometer
    Oct 29, 2012 at 3:31
0

try to use this plugin ...... https://code.google.com/p/jquery-ytiframetracker/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.