如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层-WordPress-PHP中文网

如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层

冷漠man

发布： 2025-04-21 14:02:21

原创

226人浏览过

视频是提高用户参与度的最佳方式之一。最近，我们的一位用户向我们询问一种在视频上创建共享按钮叠加层的方法，类似于流行的网站 upworthy。在本文中，我们将向您展示如何在 wordpress 中的 youtube 视频上添加共享按钮作为叠加层。

其外观示例：

如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层

在 YouTube 视频上添加共享按钮作为叠加层

有几种方法可以做到这一点。大多数方法都要求您在每次添加视频时粘贴一些 HTML 代码。我们没有这样做，而是决定创建一个短代码来自动执行此叠加效果。

只需将以下代码复制并粘贴到特定于站点的插件或主题的functions.php文件中：

如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层

现在，当您添加视频时，您将能够看到您的 YouTube 视频以及用于在 Facebook 或 Twitter 上共享视频的纯文本链接。您会注意到这些链接根本没有样式。

因此，让我们设置这些链接的样式来创建按钮，这样它看起来会更好一些。我们还将隐藏这些按钮，并仅当用户将鼠标放在视频容器上时才显示它们。为此，请将以下 CSS 添加到您的子主题的样式表中。

如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层

在 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 视频缩略图创建特色图像。

以上就是如何在 WordPress 中的 YouTube 视频上添加共享按钮作为叠加层的详细内容，更多请关注php中文网其它相关文章！