Youtube thumbnail + playicon for links

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」元素和覆蓋點擊後隱藏起來。