Javascript 如何将反应式Youtube播放器（如Facebook上使用的播放器）嵌入到web应用程序中？

我需要创建一个反应式视频播放器，类似于Facebook上的那个。这意味着，首先，没有加载

或

，只加载

然后，当您单击链接时，实际的Youtube可嵌入播放器就会出现，视频开始播放


这使得加载网页的速度更快。我可以使用Ajax和艰苦的工作来解决这个问题，但我更喜欢一个可靠的Javascript解决方案或一个我可以依赖的第三方库

任何建议都欢迎
 因此，在单击图像时，需要使用jQuery动态创建iframe元素（或类似元素）。这是一个非常基本的例子：

jQuery(document).ready(function(){
  $('img').click(function(){
    $('<iframe>').attr({
      src: 'http://google.com'
    }).insertAfter($(this));
  });
});

jQuery（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
$（''）.attr({
src:'http://google.com'
})。在（$（本））之后插入；
});
});
因此，当您单击图像时，需要使用jQuery动态创建iframe元素（或类似元素）。这是一个非常基本的例子：

jQuery(document).ready(function(){
  $('img').click(function(){
    $('<iframe>').attr({
      src: 'http://google.com'
    }).insertAfter($(this));
  });
});

jQuery（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
$（''）.attr({
src:'http://google.com'
})。在（$（本））之后插入；
});
});
我非常喜欢简单的Javascript解决方案，因为它几乎是即时的。在接受之前，我将等待更多答案。另一个选项也是将iframe或embed加载到页面并隐藏，然后使用类似于.fadeIn（）的单击事件或类似的操作。第一种选择是在开始时加快加载时间，第二种选择是在用户决定观看之前允许视频缓冲。我非常喜欢简单的Javascript解决方案，因为它几乎是即时的。在接受之前，我将等待更多答案。另一个选项也是将iframe或embed加载到页面并隐藏，然后使用类似于.fadeIn（）的单击事件或类似的操作。第一个选项最初是更快的加载时间，第二个选项允许在用户决定查看视频之前缓冲视频。