Youtube 缩略图 + playicon 链接

Question

最近我在 Facebook 上看到了指向嵌入了 Youtube 的外部网站的链接，该链接在时间线上显示了一个巨大的视频缩略图 + 一个 Youtube 播放图标。

这是一个屏幕截图：

我已经尝试做一些研究，也做了一些测试，看看是否只是 Facebook 做的，但我一直没能找到正确的解决方案。

你们中有人认识吗？

Answer 1

试试这个：

<style>
   .oVideo {
      width: 300px;
      height: 150px;
      background-color: #f00;
      position: relative;
   }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="oVideo">
   <!-- INSERT PREVIEW AND PLAY IMAGE HERE WITH AN ABSOLUTE POSITION -->
</div>

<script>
   $(document).ready(function () {
      $('.oVideo').click(function () {
         var video = '<iframe src="http://www.youtube.com/embed/6TgyvSQlJtI?wmode=transparent&enablejsapi=1&rel=0&autohide=1&autoplay=1" frameborder="0" allowfullscreen id="video"></iframe>';
         $('.oVideo').html(video);
         // REMOVE THE PREVIEW AND PLAY IMAGE ELEMENTS HERE
      });
   });
</script>

然后只需在“.oVideo”元素中添加预览图像和播放按钮图像，并在单击叠加层时隐藏它们。