Iframe sometimes appears and will not dissapear

I'm putting together a quick webpage for my friends band with multiple embeded youtube iframes that I want to be hidden at first (with jquery).

The issue is that often (on chrome/windows at least) the iframes will appear in the top left corne开发者_开发技巧r as though they were positioned absolutely to the top left. In the javascript console I can then type $("*").hide(); and everything will disappear but not the iframes.

The problem seems to be related to when I hide the iframes' containing divs ($(".details").css("display","none");).

Here is my code. Click the link above for the full working example.

     $(document).ready(function() {
        $(".details").css("display","none");
        $("a.date").click(function() { 

            $(this).parent().children("div").toggle('slow');
            $(document.body).animate({
                'scrollTop':   $(this).offset().top
            },   2000);
        }); 
    });

Any advice/help would be greatly appreciated.

Cant you lazy load iframe for each user click rather than pre-loading everything on page load?

Like binding the click listener on each link and setting the iframe src attribute to the corresponding youtube link?

Eg:

For the sake of this example, lemme assume that you have 10 youtube URLs and correspondingly 10 anchors in you html.

Rather than loading a separate iframe for each of the video, why dont you keep a single iframe whose src attribute which change depending on which link the user clicks.

$('a.youtubelinks').click(function(event){
    $('iframe').attr('src', $(event.target).attr('src'));
});

BONUS: You can programatically click the first link in your list so that the first video in the list will be set as ifram src

$('link1').click();