Html 用于链接的Youtube缩略图+播放图标

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

以下是一个屏幕截图：

我试着做了一些研究，也做了一些测试，看看这是否仅仅是Facebook做的，但我没有找到正确的解决方案

你们有谁知道吗

试试这个：

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

但这是在Facebook上，我想要此图像。不在我自己的页面上