視頻是提高用戶參與度的最佳方式之一。最近，我們的一位用戶向我們詢問一種在視頻上創(chuàng)建共享按鈕疊加層的方法，類似于流行的網(wǎng)站 upworthy。在本文中，我們將向您展示如何在 wordpress 中的 youtube 視頻上添加共享按鈕作為疊加層。
其外觀示例：
在 youtube 視頻上添加共享按鈕作為疊加層
有幾種方法可以做到這一點。大多數(shù)方法都要求您在每次添加視頻時粘貼一些 html 代碼。我們沒有這樣做，而是決定創(chuàng)建一個短代碼來自動執(zhí)行此疊加效果。
只需將以下代碼復制并粘貼到特定于站點的插件或主題的functions.php文件中：
現(xiàn)在，當您添加視頻時，您將能夠看到您的 YouTube 視頻以及用于在 facebook 或 twitter 上共享視頻的純文本鏈接。您會注意到這些鏈接根本沒有樣式。
因此，讓我們設置這些鏈接的樣式來創(chuàng)建按鈕，這樣它看起來會更好一些。我們還將隱藏這些按鈕，并僅當用戶將鼠標放在視頻容器上時才顯示它們。為此，請將以下 css 添加到您的子主題的樣式表中。
在 YouTube 視頻上的共享按鈕疊加層中添加 wordpress 帖子鏈接
在我們發(fā)布這篇文章后，我們的一些用戶要求他們希望使用共享按鈕來共享他們的 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 或短代碼片段以滿足您的需求。要進一步優(yōu)化您的視頻，您可以使用 FitVids jquery 插件使您的YouTube 視頻具有響應能力。您還可以關閉視頻末尾出現(xiàn)的相關視頻。甚至從YouTube 視頻縮略圖創(chuàng)建特色圖像。
