How to Add Share Buttons as Overlay on YouTube Videos in WordPress
Videos are one of the best ways to boost user engagement. Recently one of our users asked us about a way to create share button overlays on videos similar to the popular site UpWorthy. In this article, we will show you how to add share buttons as overlay on YouTube videos in WordPress.
Example of what it would look like:
Adding Share Buttons as Overlay on YouTube Videos
There were several ways that this could be done. Most ways would require you to paste a bits of HTML code every time you add a video. Instead of doing that, we decided to create a shortcode that would automate this overlay effect.
Simply copy and paste the following code in a site-specific plugin or your theme’s functions.php file:
/// 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 id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>'; // 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=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" 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=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'); This code creates a shortcode that automatically adds twitter and facebook share links to your videos. These buttons are only visible when the user brings their mouse over the video. You can use it add any other social media channel as well.
To use this shortcode, all you will need to do is add the YouTube video ID in the shortcode like this:
[wpb-yt video="qzOOy1tWBCg"]
You can get the YouTube video ID from the URL string. Like this:
Now when you add a video, you will be able to see your YouTube video and plain text links to share the video on Facebook or Twitter. You will notice that these links are not styled at all.
So lets style these links to create buttons, so it looks a bit nicer. We will also hide these buttons and make them appear only when a user takes their mouse on the video container. To do this add the following CSS to your Child Theme‘s stylesheet.
#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; } That’s all. Now you should have share buttons overlay on your YouTube videos in WordPress.
Adding Share Buttons as Overlay for YouTube Video Playlists in WordPress
After publishing this article many of our readers asked, how this code can be modified to work for YouTube playlists as well as videos. If you embed YouTube videos as well as playlists on your WordPress site, then you should use this code instead.
/* * 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 id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '?list=' . $playlist . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>'; // Add Facebook 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=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video . '%26list%3D' . $playlist . '" target="_blank">Facebook</a></li>'; // Add Twitter button $string .= '<li class="twitter" id="twitter"><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 id="video-container"><iframe src="//www.youtube.com/embed/' . $video . '" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>'; // Add Facebook 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=https%3A%2F%2Fyoutube.com/watch%3Fv%3D'. $video .'" target="_blank"> Facebook</a></li>'; // Add Twitter button $string .= '<li class="twitter" id="twitter"><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'); Using the code above you can also add a playlist with overlaying share buttons. To display your playlist you will have to provide the video id and playlist id in the shortcode like this:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
You can get your video and playlist IDs by visiting the playlist on YouTube and copying list ID from the URL, like this:
Adding WordPress Post Link in Share Button Overlay on YouTube Videos
After we published this article, some of our users asked that they would like the share buttons to share their WordPress post’s link instead of YouTube video link. To do that you need to replace the video URL in share buttons with the WordPress post’s permalink. Use this code in your functions.php or site-specific plugin:
/// 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 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'); Feel free to modify the CSS or the shortcode snippets to meet your needs. To further optimize your videos, you can make your YouTube videos responsive using FitVids jQuery plugin. You can also turn off related videos that appear at the end of the video. or even create featured images from YouTube video thumbnails.
We hope that this article helped you add custom share buttons as overlay on YouTube videos in WordPress. Let us know which social media channels you are planning to add on your videos by leaving a comment below.
