如何在WordPress中的YouTube视频上添加共享按钮作为叠加
视频是提升用户参与度的最佳方式之一。最近，我们的一位用户向我们询问了一种在与热门网站UpWorthy类似的视频上创建共享按钮覆盖的方法。在本文中，我们将向您展示如何在WordPress的YouTube视频中添加共享按钮作为叠加层。
它的外观示例：
在YouTube视频上添加共享按钮作为叠加层
有几种方法可以完成此操作。大多数方法都要求您在每次添加视频时粘贴一些HTML代码。而不是这样做，我们决定创建一个自动化这种叠加效果的短代码。
只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.php文件中：
/// WPBeginner"s YouTube Share Overlay Buttons function wpb_yt_buttons($atts) { // Get the video ID from shortcode extract( shortcode_atts( array( "video" => "" ), $atts ) ); // Display video $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Add Facebook share button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video ."" target="_blank"> Facebook</a></li>"; // Add Tweet button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video ."">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; // Return output return $string; } // Add Shortcode add_shortcode("wpb-yt", "wpb_yt_buttons");
此代码创建一个短代码，自动为您的视频添加Twitter和Facebook共享链接。这些按钮仅在用户将鼠标悬停在视频上时可见。您也可以使用它添加任何其他社交媒体渠道。
要使用此短代码，您需要做的只是在短代码中添加YouTube视频ID，如下所示：
[wpb-yt video =“qzOOy1tWBCg”]
您可以获取YouTubeURL字符串中的视频ID。像这样：
现在，当您添加视频时，您将能够看到您的YouTube视频和纯文本链接，以便在Facebook或Twitter上分享视频。您会注意到这些链接根本没有样式。
因此，让这些链接设置样式以创建按钮，因此它看起来更好一些。我们还将隐藏这些按钮，并仅在用户将鼠标放在视频容器上时才显示。为此，请将以下CSS添加到Child Theme的样式表中。
#share-video-overlay { position: relative; right: 40px; top: -190px; list-style-type: none; display: block; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s, top .25s; -moz-transition: opacity .4s, top .25s; -o-transition: opacity .4s, top .25s; transition: opacity .4s, top .25s; z-index: 500; } #share-video-overlay:hover { opacity:1; filter:alpha(opacity=100); } .share-video-overlay li { margin: 5px 0px 5px 0px; } #facebook { color: #ffffff; background-color: #3e5ea1; width: 70px; padding: 5px; } .facebook a:link, .facebook a:active, .facebook a:visited { color:#fff; text-decoration:none; } #twitter { background-color:#00a6d4; width: 70px; padding: 5px; } .twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { color:#FFF; text-decoration:none; }
就这样。现在，您应该在WordPress上的YouTube视频中叠加共享按钮。
在WordPress中添加共享按钮作为YouTube视频播放列表的叠加层
在发布这篇文章之后，我们的许多读者都会问，如何修改此代码以适用于YouTube播放列表和视频。如果您在WordPress网站上嵌入了YouTube视频和播放列表，那么您应该使用此代码。
/* * WPBeginner"s Share Overlay Buttons * on YouTube Videos and Playlists */ function wpb_yt_buttons($atts) { // Get the video and playlist ids from shortcode extract( shortcode_atts( array( "video" => "", "playlist" => "", ), $atts ) ); // Check to see if a playlist id is provided with shortcode if (!$playlist == "" ) : // Display video playlist $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "?list=" . $playlist . "" allowfullscreen="" frame></iframe>"; // Add Facebook button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video . "%26list%3D" . $playlist . "" target="_blank">Facebook</a></li>"; // Add Twitter button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video . "%26list%3D" . $playlist . "">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; // If no playlist ID is provided else : //Display video $string .= "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Add Facebook button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video ."" target="_blank"> Facebook</a></li>"; // Add Twitter button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video ."">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; endif; // Return output return $string; } // Add shortcode add_shortcode("wpb-yt", "wpb_yt_buttons");
使用上面的代码，您还可以添加带有重叠共享按钮的播放列表。要显示您的播放列表，您必须在短代码中提供视频ID和播放列表ID，如下所示：
[wpb-yt video =“exP9N3rIfV0”playlist =“UUhA624rCabHAmd6lpkLOw7A”]
您可以通过访问YouTube上的播放列表并从URL复制列表ID来获取您的视频和播放列表ID，如下所示：
在YouTube视频上的分享按钮叠加中添加WordPress帖子链接
在我们发布这篇文章之后，我们的一些用户要求他们希望共享按钮分享他们的WordPress帖子链接而不是YouTube视频链接。为此，您需要使用WordPress帖子的永久链接替换共享按钮中的视频URL。在functions.php或特定于站点的插件中使用此代码：
/// WPBeginner"s YouTube Share Overlay Buttons function wpb_yt_buttons($atts) { // Get the video ID from shortcode extract( shortcode_atts( array( "video" => "" ), $atts ) ); // Display video $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Get post permalink and encode URL $permalink_encoded = urlencode(get_permalink()); // Add Facebook share button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=". $permalink_encoded ."" target="_blank"> Facebook</a></li>"; // Add Tweet button $string .= "<li ><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");
可以随意修改CSS或短代码片段以满足您的需求。为了进一步优化您的视频，您可以使用FitVids jQuery插件让您的YouTube视频响应。您还可以关闭显示在视频末尾的相关视频。甚至可以从YouTube视频缩略图创建精选图片。
视频是提升用户参与度的最佳方式之一。最近，我们的一位用户向我们询问了一种在与热门网站UpWorthy类似的视频上创建共享按钮覆盖的方法。在本文中，我们将向您展示如何在WordPress的YouTube视频中添加共享按钮作为叠加层。
它的外观示例：
在YouTube视频上添加共享按钮作为叠加层
有几种方法可以完成此操作。大多数方法都要求您在每次添加视频时粘贴一些HTML代码。而不是这样做，我们决定创建一个自动化这种叠加效果的短代码。
只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.php文件中：
/// WPBeginner"s YouTube Share Overlay Buttons function wpb_yt_buttons($atts) { // Get the video ID from shortcode extract( shortcode_atts( array( "video" => "" ), $atts ) ); // Display video $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Add Facebook share button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video ."" target="_blank"> Facebook</a></li>"; // Add Tweet button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video ."">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; // Return output return $string; } // Add Shortcode add_shortcode("wpb-yt", "wpb_yt_buttons");
此代码创建一个短代码，自动为您的视频添加Twitter和Facebook共享链接。这些按钮仅在用户将鼠标悬停在视频上时可见。您也可以使用它添加任何其他社交媒体渠道。
要使用此短代码，您需要做的只是在短代码中添加YouTube视频ID，如下所示：
[wpb-yt video =“qzOOy1tWBCg”]
您可以获取YouTubeURL字符串中的视频ID。像这样：
现在，当您添加视频时，您将能够看到您的YouTube视频和纯文本链接，以便在Facebook或Twitter上分享视频。您会注意到这些链接根本没有样式。
因此，让这些链接设置样式以创建按钮，因此它看起来更好一些。我们还将隐藏这些按钮，并仅在用户将鼠标放在视频容器上时才显示。为此，请将以下CSS添加到Child Theme的样式表中。
#share-video-overlay { position: relative; right: 40px; top: -190px; list-style-type: none; display: block; opacity: 0; filter: alpha(opacity=0); -webkit-transition: opacity .4s, top .25s; -moz-transition: opacity .4s, top .25s; -o-transition: opacity .4s, top .25s; transition: opacity .4s, top .25s; z-index: 500; } #share-video-overlay:hover { opacity:1; filter:alpha(opacity=100); } .share-video-overlay li { margin: 5px 0px 5px 0px; } #facebook { color: #ffffff; background-color: #3e5ea1; width: 70px; padding: 5px; } .facebook a:link, .facebook a:active, .facebook a:visited { color:#fff; text-decoration:none; } #twitter { background-color:#00a6d4; width: 70px; padding: 5px; } .twitter a, .twitter a:link, .twitter a:active, .twitter a:visited, .twitter a:hover { color:#FFF; text-decoration:none; }
就这样。现在，您应该在WordPress上的YouTube视频中叠加共享按钮。
在WordPress中添加共享按钮作为YouTube视频播放列表的叠加层
在发布这篇文章之后，我们的许多读者都会问，如何修改此代码以适用于YouTube播放列表和视频。如果您在WordPress网站上嵌入了YouTube视频和播放列表，那么您应该使用此代码。
/* * WPBeginner"s Share Overlay Buttons * on YouTube Videos and Playlists */ function wpb_yt_buttons($atts) { // Get the video and playlist ids from shortcode extract( shortcode_atts( array( "video" => "", "playlist" => "", ), $atts ) ); // Check to see if a playlist id is provided with shortcode if (!$playlist == "" ) : // Display video playlist $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "?list=" . $playlist . "" allowfullscreen="" frame></iframe>"; // Add Facebook button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video . "%26list%3D" . $playlist . "" target="_blank">Facebook</a></li>"; // Add Twitter button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video . "%26list%3D" . $playlist . "">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; // If no playlist ID is provided else : //Display video $string .= "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Add Facebook button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fyoutube.com/watch%3Fv%3D". $video ."" target="_blank"> Facebook</a></li>"; // Add Twitter button $string .= "<li ><a href="http://www.twitter.com/share?&text=Check+this+video&url=http%3A//www.youtube.com/watch%3Fv%3D". $video ."">Tweet</a></li></ul>"; // Close video container $string .= "</div>"; endif; // Return output return $string; } // Add shortcode add_shortcode("wpb-yt", "wpb_yt_buttons");
使用上面的代码，您还可以添加带有重叠共享按钮的播放列表。要显示您的播放列表，您必须在短代码中提供视频ID和播放列表ID，如下所示：
[wpb-yt video =“exP9N3rIfV0”playlist =“UUhA624rCabHAmd6lpkLOw7A”]
您可以通过访问YouTube上的播放列表并从URL复制列表ID来获取您的视频和播放列表ID，如下所示：
在YouTube视频上的分享按钮叠加中添加WordPress帖子链接
在我们发布这篇文章之后，我们的一些用户要求他们希望共享按钮分享他们的WordPress帖子链接而不是YouTube视频链接。为此，您需要使用WordPress帖子的永久链接替换共享按钮中的视频URL。在functions.php或特定于站点的插件中使用此代码：
/// WPBeginner"s YouTube Share Overlay Buttons function wpb_yt_buttons($atts) { // Get the video ID from shortcode extract( shortcode_atts( array( "video" => "" ), $atts ) ); // Display video $string = "<div ><iframe src="//www.youtube.com/embed/" . $video . "" allowfullscreen="" frame></iframe>"; // Get post permalink and encode URL $permalink_encoded = urlencode(get_permalink()); // Add Facebook share button $string .= "<ul ><li ><a href="https://www.facebook.com/sharer/sharer.php?u=". $permalink_encoded ."" target="_blank"> Facebook</a></li>"; // Add Tweet button $string .= "<li ><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");
可以随意修改CSS或短代码片段以满足您的需求。为了进一步优化您的视频，您可以使用FitVids jQuery插件让您的YouTube视频响应。您还可以关闭显示在视频末尾的相关视频。甚至可以从YouTube视频缩略图创建精选图片。
