如何在触发某些点击事件后才加载嵌入视频。 jQuery

Question

现在我已经满足了我的整体效果：单击“显示我”，它会显示YT视频，再次单击时，vid将隐藏等等，但即使站点首先被加载（并且YT视频被隐藏） - 它的所有（Mb）大小都被计数，因为它显示导致网站加载缓慢。我的问题是如何加载嵌入式视频（与其大小）只有在我点击“显示我”元素后。

这是我有：

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; 
} 

Answer 1

尝试是这样的：

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/