如何在 Web 应用程序中嵌入像 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));
  });
});