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