Ифраме иногда появляется и не исчезнет

Question

Я собираю быструю веб-страницу для группы моих друзей с несколькими встроенными фреймами YouTube, которые я хочу сначала спрятать (с помощью jquery).

Проблема в том, что часто (по крайней мере в chrome / windows) элементы iframe появляются в верхнем левом углу, как будто они расположены абсолютно слева вверху. В консоли javascript я могу набрать $("*").hide();, и все исчезнет, ​​но не iframes.

Проблема, похоже, связана с тем, когда я скрываю элементы iframes, содержащие div ($(".details").css("display","none");).

Вот мой код. Нажмите на ссылку выше для полного рабочего примера.

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

Любой совет / помощь будет принята с благодарностью.

Answer 1

Не можете ли вы лениво загружать iframe для каждого клика пользователя вместо предварительной загрузки всего при загрузке страницы?

Как привязать прослушиватель кликов к каждой ссылке и установить атрибут iframe src для соответствующей ссылки на YouTube?

Например:

Для примера рассмотрим, что у вас 10 URL-адресов на YouTube и, соответственно, 10 якорей в HTML.

Вместо загрузки отдельного iframe для каждого видео, почему бы вам не сохранить один iframe, атрибут src которого меняется в зависимости от того, по какой ссылке пользователь нажимает.

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

БОНУС: Вы можете программно щелкнуть первую ссылку в своем списке, чтобы первое видео в списке было установлено как ifram src

$('link1').click();