视频是提高用户参与度的最佳方法之一。 最近，我们的一位用户问我们如何创建类似于热门网站UpWorthy的视频上的分享按钮叠加。 在这篇文章中，我们将向您展示如何将添加共享按钮添加到WordPress上的YouTube视频上。
它是什么样子的例子：
添加分享按钮作为覆盖YouTube视频
有几种方法可以做到这一点。 每次添加视频时，大多数方法都会要求您粘贴一些HTML代码。 而不是这样做，我们决定创建一个短代码，这将自动叠加效果。
只需将以下代码复制并粘贴到站点特定的插件或主题的functions.php文件中：
///网站的YouTube分享覆盖按钮
函数wpb_yt_buttons（$ atts）{
//从简码中获取视频ID
提取（shortcode_atts（array（
'video'=>''
），$ atts））;
//显示视频
//添加Facebook分享按钮
$ string。='
“;
//关闭视频容器
$ string。=”;
//返回输出
返回$ string;
}
//添加简码
add_shortcode（’wpb-yt’，’wpb_yt_buttons’）;
此代码会创建一个自动将Twitter和Facebook共享链接添加到您的视频的短代码。 这些按钮只有在用户将鼠标放在视频上时才可见。 您也可以使用它添加任何其他社交媒体渠道。
要使用此简码，您只需在短码中添加YouTube视频ID，如下所示：
[wpb-yt video =“qzOOy1tWBCg”]
您可以从网址字符串中获取YouTube视频ID。 喜欢这个：
现在，当您添加视频时，您将能够看到您的YouTube视频和纯文本链接，以在Facebook或Twitter上分享视频。 您会注意到这些链接完全没有风格。
因此，让这些链接的风格创建按钮，所以看起来好一点。 我们也将隐藏这些按钮，并使其仅在用户将鼠标放在视频容器上时出现。 为此，请将以下CSS添加到您的Child Theme样式表中。
＃share-video-overlay {
位置：相对;
正确：40px;
顶部：-190px;
list-style-type：none;
显示：块;
不透明度：0;
过滤器：alpha（opacity = 0）;
-webkit-transition：opacity .4s，top .25s;
-moz-transition：opacity .4s，top .25s;
-o-transition：不透明.4s，top .25s;
过渡：不透明.4s，顶部.25s;
z-index：500;
}
＃share-video-overlay：hover {
不透明度：1;
滤波器：α（不透明度为100）;
}
.share-video-overlay li {
margin：5px 0px 5px 0px;
}
#facebook {
颜色：#ffffff;
background-color：＃3e5ea1;
宽度：70px;
填充：5px;
}
.facebook a：link，.facebook a：active，.facebook a：visited {
颜色：#FFF;
文字修饰：无;
}
＃推特 {
背景色：＃00a6d4;
宽度：70px;
填充：5px;
}
.twitter a，.twitter a：链接，.twitter a：active，.twitter a：visited，.twitter a：hover {
颜色：#FFF;
文字修饰：无;
}
就这样。 现在，您应该在WordPress中将分享按钮叠加在您的YouTube视频上。
在WordPress中为YouTube视频播放列表添加分享按钮
在发表本文之后，我们的许多读者都问，如何修改这段代码以适用于YouTube播放列表以及视频。 如果您在YouTube网站上嵌入了YouTube视频以及播放列表，则应该使用此代码。
/ *
*网站的共享覆盖按钮
*在YouTube视频和播放列表中
* /
函数wpb_yt_buttons（$ atts）{
//从短代码获取视频和播放列表ID
提取（shortcode_atts（array（
'video'=>''，
'playlist'=>''，
），$ atts））;
//检查播放列表ID是否与短代码一起提供
如果（！$ playlist ==''）：
//显示视频播放列表
//添加Facebook按钮
$ string。='
“;
//关闭视频容器
$ string。=”;
//如果没有提供播放列表ID
其他：
//显示视频
//添加Facebook按钮
$ string。=’
“;
//关闭视频容器
$ string。=”;
万一;
//返回输出
返回$ string;
}
//添加短代码
add_shortcode（’wpb-yt’，’wpb_yt_buttons’）;
使用上面的代码，你也可以添加一个播放列表覆盖共享按钮。 要显示您的播放列表，您将不得不在短代码中提供视频ID和播放列表ID，如下所示：
[wpb-yt video =“exP9N3rIfV0”playlist =“UUhA624rCabHAmd6lpkLOw7A”]
您可以通过访问YouTube上的播放列表和从URL复制列表ID来获取视频和播放列表ID，如下所示：
在YouTube视频上添加分享按钮叠加中的WordPress帖子链接
在我们发表这篇文章之后，我们的一些用户问他们想分享按钮来分享他们的WordPress博客链接，而不是YouTube视频链接。 要做到这一点，你需要用WordPress的帖子永久链接替换共享按钮中的视频网址。 在你的functions.php或站点特定的插件中使用这个代码：
///网站的YouTube分享覆盖按钮
函数wpb_yt_buttons（$ atts）{
//从简码中获取视频ID
提取（shortcode_atts（array（
'video'=>''
），$ atts））;
//显示视频
//获取帖子固定链接并编码URL
$ permalink_encoded = urlencode（get_permalink（））;
//添加Facebook分享按钮
$ string。='
“;
//关闭视频容器
$ string。=”;
//返回输出
返回$ string;
}
//添加简码
add_shortcode（’wpb-yt’，’wpb_yt_buttons’）;
随意修改CSS或短代码片段，以满足您的需求。 为了进一步优化您的视频，您可以使用FitVids jQuery插件使您的YouTube视频响应。 您也可以关闭出现在视频结尾处的相关视频。 甚至从YouTube视频缩略图创建精选图片。
我们希望这篇文章能够帮助您在WordPress中添加自定义的分享按钮作为YouTube视频的叠加。 请通过下面的留言让我们知道您计划添加到您的视频的社交媒体渠道。