iframe有时会出现并且不会消失

Question

我正在为我的朋友乐队制作一个快速网页，其中包含多个我想隐藏的嵌入式 YouTube iframe首先（使用jquery）。

问题是，通常（至少在 chrome/windows 上）iframe 会出现在左上角，就好像它们绝对位于左上角一样。然后，我可以在 javascript 控制台中输入 $("*").hide();，所有内容都会消失，但 iframe 不会。

问题似乎与我隐藏包含 div 的 iframe ($(" .details").css("显示","无");)。

这是我的代码。单击上面的链接查看完整的工作示例。

     $(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 链接一样？

例如：

在本示例中，假设您的 html 中有 10 个 YouTube URL 和相应的 10 个锚点。

与其为每个视频加载单独的 iframe，不如保留一个 src 属性根据用户单击的链接而变化的 iframe。

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

奖励：您可以通过编程方式单击列表中的第一个链接，以便列表中的第一个视频将设置为 iram src

$('link1').click();