视频是提高用户参与度的最佳方式之一。最近，我们的一位用户向我们询问一种在视频上创建共享按钮叠加层的方法，类似于流行的网站upworthy。在本文中，我们将向您展示如何在wordpress中的youtube视频上添加共享按钮作为叠加层。
其外观示例：
在YouTube视频上添加共享按钮作为叠加层
有几种方法可以做到这一点。大多数方法都要求您在每次添加视频时粘贴一些HTML代码。我们没有这样做，而是决定创建一个短代码来自动执行此叠加效果。
只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.php文件中：
现在，当您添加视频时，您将能够看到您的YouTube视频以及用于在Facebook或Twitter上共享视频的纯文本链接。您会注意到这些链接根本没有样式。
因此，让我们设置这些链接的样式来创建按钮，这样它看起来会更好一些。我们还将隐藏这些按钮，并仅当用户将鼠标放在视频容器上时才显示它们。为此，请将以下CSS添加到您的子主题的样式表中。
在YouTube视频上的共享按钮叠加层中添加WordPress帖子链接
在我们发布这篇文章后，我们的一些用户要求他们希望使用共享按钮来共享他们的WordPress帖子的链接，而不是YouTube视频链接。为此，您需要将共享按钮中的视频URL替换为WordPress帖子的永久链接。在您的functions.php或特定于站点的插件中使用此代码：
///WPBeginner'sYouTubeShareOverlayButtonsfunctionwpb_yt_buttons($atts){//GetthevideoIDfromshortcodeextract(shortcode_atts(array('video'=>''),$atts));//Displayvideo$string='<divid="video-container"><iframesrc="https://www.yaozhongpeng.com/static/image/lazy.gif" class="lazy" original="https://www.yaozhongpeng.com/static/image/nopic320.png"'.$video.'"height="315"width="560"allowfullscreen=""frameborder="0"></iframe>';//GetpostpermalinkandencodeURL$permalink_encoded=urlencode(get_permalink());//AddFacebooksharebutton$string.='<ulclass="share-video-overlay"id="share-video-overlay"><liclass="facebook"id="facebook"><ahref="https://www.facebook.com/sharer/sharer.php?u='.$permalink_encoded.'"target="_blank">Facebook</a></li>';//AddTweetbutton$string.='<liclass="twitter"id="twitter"><ahref="http://www.twitter.com/share?&text=Check+this+video&url='.$permalink_encoded.'">Tweet</a></li></ul>';//Closevideocontainer$string.='</div>';//Returnoutputreturn$string;}//AddShortcodeadd_shortcode('wpb-yt','wpb_yt_buttons');