html - 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'元素中添加预览图像和播放按钮图像，并在叠加层上单击时将其隐藏。