视频是提高用户参与度的最佳方式之一。最近，我们的一位用户向我们询问一种在视频上创建共享按钮叠加层的方法，类似于流行的网站 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
