Javascript YouTube API - Loading Player
<p>I have a list of YouTube videos on my website and this is what each list item looks like:</p>

<pre><code>&lt;div class="video_item" id="&lt;YouTubeVideoID&gt;"&gt; 
    // video thumbnail and information
&lt;/div&gt;
</code></pre>

<p>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:</p>


    


<pre><code>$(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);
            });
        }
    });
});
</code></pre>

<p>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.</p>
