如何在Facebook应用程序中嵌入像Facebook上使用的反应式Youtube播放器？

Question

我需要创建一个反应式视频播放器，类似于在Facebook上找到的播放器。这意味着，首先，不会加载<iframe>或<video>，只会加载<img>以及您要观看的视频的说明。 （见图）

  

然后，当您点击该链接时，会显示实际的Youtube可嵌入播放器并启动视频。

  

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

欢迎任何建议！

Answer 1

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

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