如何仅在触发某些点击事件后加载嵌入的视频.jQuery

How to load the embeded video only after some click-event was triggered. jQuery

本文关键字：加载 事件 jQuery 的视频 何仅      更新时间：2023-09-26

我现在在整体效果方面满足我:点击"show me"，它显示一个YT视频，当再次点击-视频将隐藏等。但是，即使网站在第一时间被加载(YT视频是隐藏的)-它的所有(Mb)大小被计算，因为它显示导致网站加载缓慢。我的问题是如何加载嵌入的视频(与它的大小)只有在我点击"Show me"元素后。

这是我的:

HTML: 


<div class="#">
    <span class="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</span>
    <span class="#" id="shown">
    <iframe width="100%" height="315" src="https://www.youtube.com/embed/#" frameborder="0" allowfullscreen></iframe>
    </span>
</div>

JS: 

$(document).ready(function(){
$("#show_me").click(function(){
    $("#shown").toggle();
});
});
CSS: 

#shown {
display: none;
}

试试这样:

HTML: 

<div class="#">
    <a href="#" id="show_me"><i class="icon fa-angle-down"></i>Show Me</a>
    <div id="i_frame"></div>
</div>

JS: 

$(document).ready(function(){
    $("#show_me").click(function(e){
        e.preventDefault();
        if ($(this).is(".opened") ) {
            $(this).removeClass("opened");
            $(this).find(".icon").removeClass("fa-angle-up").addClass("fa-angle-down");
            $("#i_frame").hide().html("");
        } else {
            $(this).addClass("opened");
            $(this).find(".icon").removeClass("fa-angle-down").addClass("fa-angle-up");
            $("#i_frame").show().html("<iframe width='100%' height='315' src='https://www.youtube.com/embed/#' frameborder='0' allowfullscreen></iframe>");
        }
    });
});
CSS: 

#i_frame {
    display: none;
}
https://jsfiddle.net/jeremykenedy/fkcnncjm/

相关文章：