How to Add Share Buttons as Overlay on YouTube Videos in WordPress

How to Add Eye-Catching Share Buttons to Your YouTube Videos in WordPress (2023 Guide)

Are you embedding YouTube videos in your WordPress posts? Want to increase user engagement with those videos and drive more traffic to your site?

By adding share buttons as an overlay on your embedded YouTube videos, you can make it quick and easy for viewers to share your video content on their favorite social networks. This will expose your brand and content to a wider audience.

In this step-by-step tutorial, we‘ll show you exactly how to add Facebook, Twitter, and other social share buttons as a stylish overlay on top of YouTube videos in WordPress.

Why Add Social Sharing Buttons to YouTube Videos?

Before we dive into the tutorial, let‘s look at a few key reasons why it‘s smart to add social sharing functionality to the YouTube videos on your WordPress site:

Boost user engagement: When viewers are actively engaged with your video content, they spend more time on your site. Engagement is also a positive ranking signal for SEO.
Drive referral traffic: When users share your YouTube videos on their social channels, their network of friends and followers can click the shared link to visit your site, bringing you valuable referral traffic.
Increase video views: Social shares also mean more people are viewing and interacting with your video content, both on your site and on YouTube itself. Popular videos tend to rank higher in YouTube search results.
Build brand awareness: The more your video content gets shared across social media, the more exposure your brand gets. Over time, this can significantly increase your brand‘s reach and authority online.

Now that you understand the benefits, let‘s look at how to actually add the share buttons in WordPress. We‘ll be using a custom shortcode along with some CSS to create the overlay effect.

How to Add YouTube Video Share Buttons in WordPress

The share buttons will appear as a semi-transparent overlay on top of the embedded YouTube video whenever a user hovers their mouse over the video. Clicking a button opens a new browser tab where the user can share the video with their own comment.

Here are the steps to set this up on your WordPress site:

Step 1: Create a Custom Shortcode

First, we need to create a shortcode that will generate the YouTube embed code along with the HTML for our share buttons.

Open your theme‘s functions.php file or a site-specific plugin and add the following code:

function wpb_yt_share_buttons($atts) {
// Extract the YouTube video ID from shortcode
extract(shortcode_atts(array(‘video‘ => ‘‘), $atts));

// Build YouTube embed code
$embed_code = ‘

// Get current post URL
$post_url = urlencode(get_permalink());

// Add Facebook share button
$embed_code .= ‘

‘;

$embed_code .= ‘

‘; // Close .youtube-video div

return $embed_code;
}
add_shortcode(‘youtube-share‘, ‘wpb_yt_share_buttons‘);

This code does the following:

Defines a shortcode named youtube-share that accepts a YouTube video ID as a parameter
Extracts the video ID and uses it to build the YouTube iframe embed code
Retrieves the URL of the current WordPress post and encodes it for use in sharing links
Outputs HTML for Facebook and Twitter share buttons, linking to the encoded post URL
Wraps everything in a
for styling purposes
Returns the final embed code

We‘ve used Font Awesome CSS classes for the social icons. Make sure you have Font Awesome enqueued on your site for the icons to display properly.

Step 2: Style the Share Buttons

Now we need to add some CSS to style our share buttons and position them as an overlay on top of the video. The buttons will be hidden by default and only appear on hover.

Add the following CSS to your theme‘s stylesheet or the Additional CSS section under Appearance > Customize:

.youtube-video {
position: relative;
overflow: hidden;
cursor: pointer;
}

.share-overlay {
position: absolute;
width: 100%;
bottom: -50px;
opacity: 0;
background: rgba(0, 0, 0, 0.7);
text-align: center;
padding: 20px 0;
transition: all 0.3s ease;
}

.youtube-video:hover .share-overlay {
bottom: 0;
opacity: 1;
}

.share-button {
display: inline-block;
font-size: 20px;
color: #fff;
margin: 0 10px;
}

.share-button i {
margin-right: 10px;
}

.facebook:hover {
color: #3b5998;
}

.twitter:hover {
color: #1da1f2;
}

Here‘s what this CSS does:

The .youtube-video container div is set to position: relative to allow absolute positioning of the overlay. overflow: hidden ensures the overlay is clipped to the dimensions of the video. cursor: pointer enables the pointer cursor on hover.
The .share-overlay div is absolutely positioned across the full width of the bottom of the container. It uses a semi-transparent black background and centers the button icons.
By default, the overlay has bottom: -50px to position it just below the video, and opacity: 0 to make it fully transparent.
On hover (:hover) of .youtube-video, we transition the overlay to bottom: 0 and opacity: 1, sliding it up to cover the bottom portion of the video and making it fully opaque.
The .share-button links are styled with a large font size, white color, and horizontal margin. The .facebook and .twitter classes apply brand colors on hover.

Feel free to customize the CSS further to match your site‘s branding.

Step 3: Use the Shortcode

With the shortcode function and CSS in place, you can now easily embed YouTube videos with the share button overlay in any WordPress post or page.

To do it, simply use the youtube-share shortcode and provide the ID of the video you want to embed:

Replace VIDEO_ID with the actual ID of your YouTube video, which you can find at the end of the video‘s URL. For example:

Now when you view the embedded video, you‘ll see the Facebook and Twitter share buttons appear when hovering over it, like this:

The share buttons will link to the current post, making it easy for users to share your content and drive engagement.

Customizing the YouTube Share Button Shortcode

The youtube-share shortcode can be expanded to include additional features and customization options. Here are a few examples.

Add More Social Networks

Want to include share buttons for other social networks besides Facebook and Twitter? Simply duplicate the button HTML and modify the sharing URL.

For example, to add a LinkedIn share button:

$embed_code .= ‘<a class="share-button linkedin"
href="https://www.linkedin.com/shareArticle?url=‘.$post_url.‘"
target="_blank">
Share
‘;

Use the appropriate Font Awesome classes for the icon and add a new hover style in the CSS.

Support YouTube Playlists

By default, the shortcode only supports embedding individual YouTube videos. However, you can modify it to work with playlists too.

First, adjust the shortcode function to accept a playlist parameter:

function wpb_yt_share_buttons($atts) {
extract(shortcode_atts(array(
‘video‘ => ‘‘,
‘playlist‘ => ‘‘,
), $atts));

// Check for playlist parameter
$url_params = $video;

if (!empty($playlist)) {
$url_params .= ‘?list=‘.$playlist;
}

$embed_code = ‘

// Rest of function remains the same…

}

Now when using the shortcode, you can specify both a video ID and a playlist ID:

[youtube-share video="VIDEO_ID" playlist="PLAYLIST_ID"]

The modified function will detect the playlist parameter and append it to the iframe‘s src attribute to load the playlist embed.

Share the WordPress Post URL

In the original code, clicking the share buttons will share the URL of the current WordPress post. But what if you want to share the original YouTube video URL instead?

To do that, simply replace $post_url in the button links with the following:

$youtube_url = ‘https://www.youtube.com/watch?v=‘.$video;

Make sure to also update the encoding:

$youtube_url = urlencode($youtube_url);

Then use $youtube_url in place of $post_url in the button hrefs.

How to Add Share Buttons as Overlay on YouTube Videos in WordPress

Related