視頻是提高用戶參與度的最佳方式之一。最近，我們的一位用戶向我們詢問一種在視頻上創建共享按鈕疊加層的方法，類似于流行的網站 upworthy。在本文中，我們將向您展示如何在 wordpress 中的 youtube 視頻上添加共享按鈕作為疊加層。
其外觀示例：
在 youtube 視頻上添加共享按鈕作為疊加層
有幾種方法可以做到這一點。大多數方法都要求您在每次添加視頻時粘貼一些 html 代碼。我們沒有這樣做，而是決定創建一個短代碼來自動執行此疊加效果。
只需將以下代碼復制并粘貼到特定于站點的插件或主題的functions.php文件中：
現在，當您添加視頻時，您將能夠看到您的 YouTube 視頻以及用于在 facebook 或 twitter 上共享視頻的純文本鏈接。您會注意到這些鏈接根本沒有樣式。
因此，讓我們設置這些鏈接的樣式來創建按鈕，這樣它看起來會更好一些。我們還將隱藏這些按鈕，并僅當用戶將鼠標放在視頻容器上時才顯示它們。為此，請將以下 css 添加到您的子主題的樣式表中。
在 YouTube 視頻上的共享按鈕疊加層中添加 WordPress 帖子鏈接
在我們發布這篇文章后，我們的一些用戶要求他們希望使用共享按鈕來共享他們的 WordPress 帖子的鏈接，而不是 YouTube 視頻鏈接。為此，您需要將共享按鈕中的視頻 URL 替換為 WordPress 帖子的永久鏈接。在您的functions.php或特定于站點的插件中使用此代碼：
/// WPBeginner's YouTube Share Overlay Buttonsfunctionwpb_yt_buttons($atts) { // Get the video ID from shortcodeextract( shortcode_atts( array( 'video'=> '' ), $atts) );// Display video $string= '<div id="video-container"><iframe src="//www.youtube.com/embed/'. $video. '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>';// Get post permalink and encode URL$permalink_encoded= urlencode(get_permalink()); // Add Facebook share button $string.= '<ul class="share-video-overlay" id="share-video-overlay"><li class="facebook" id="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u='. $permalink_encoded.'" target="_blank"> Facebook</a></li>'; // Add Tweet button $string.= '<li class="twitter" id="twitter"><a href="http://www.twitter.com/share?&text=Check+this+video&url='. $permalink_encoded.'">Tweet</a></li></ul>';// Close video container $string.= '</div>';// Return output return$string; } // Add Shortcode add_shortcode('wpb-yt', 'wpb_yt_buttons');
由
在 WordPress 中一鍵使用
請隨意修改 CSS 或短代碼片段以滿足您的需求。要進一步優化您的視頻，您可以使用 FitVids jquery 插件使您的YouTube 視頻具有響應能力。您還可以關閉視頻末尾出現的相關視頻。甚至從YouTube 視頻縮略圖創建特色圖像。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
