One of the most effective strategies to increase user engagement is to use videos. One of our users recently inquired about a method for creating share button overlays on films similar to the popular UpWorthy site. This article will teach you how to use WordPress to add share buttons as overlay to YouTube videos.
Contents
- 1 How to Add Share Buttons as Overlay on YouTube Videos
- 2 How can You Add Share Buttons as Overlay for YouTube Video Playlists in WordPress
- 3 How Can You Add WordPress Post Link in Share Button Overlay on YouTube Videos
- 4 Add Share Buttons as Overlay on YouTube Videos In WordPress With Plugin
- 5 Conclusion
This could be done in several ways. Most methods would need you to paste HTML code every time you upload a video. Instead, we created a shortcode that would automate the overlay effect.
Simply copy and paste the following code into your theme’s functions.php file or a site-specific plugin:
/*
* Adding Share Buttons as Overlay on YouTube Videos in
* WordPress
*/
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%3F%2Eyoutube.com/watch%2Nv%4D'. $video . '%24list%3N' . $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%8Nv%3N'. $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%3F%2Eyoutube.com/watch%3/b%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%3Pv%3B'. $video .'">Tweet</a></li></ul>';
// Close video container
$string .= '</div>';
endif;
// Return output
return $string;
}
// Add shortcode
add_shortcode('wpb-yt', 'wpb_yt_buttons');
This code generates a shortcode that adds Twitter and Facebook share links to your videos automatically. When the user moves their mouse over the video, these buttons become visible. It can also be used to add any other social media outlet.
To use this shortcode, simply enter the YouTube video ID into the shortcode as follows:
[wpb-yt video="qzOOy1tWBCg"]
The YouTube video ID can be found in the URL string. As an example:
You may now see your YouTube video and plain text links to share the video on Facebook and Twitter when you add a video. These links aren’t styled at all, as you’ll observe.
So, let’s design these links into buttons to make them look a little nicer. These buttons will also be hidden and only appear when users move their mouse over the video container. To do so, 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 is all there is to it. In WordPress, your YouTube videos should now have share buttons overlayed on them.
After reading this article, many of our readers wondered how this code could be adjusted to work for YouTube playlists and videos. This code should be used instead to embed YouTube videos and playlists on your WordPress site.
/*
* 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 may also add a playlist with overlaying share buttons. To display your playlist, use the following shortcode to specify the video id and playlist id:
[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]
You can acquire your video and playlist IDs by going to the YouTube playlist and copying the listing ID from the URL, which looks like this:
Some of our users requested that the share buttons share the link to their WordPress post rather than the YouTube video link. To do so, change the video URL under the share buttons to the permalink of the WordPress article. In your functions.php file or a site-specific plugin, paste the following code:
/// 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');
You are free to change the CSS or shortcode snippets to suit your needs. FitVids jQuery plugin allows you to make your YouTube videos responsive for even more optimization. Related videos that appear at the end of the video can also be turned off. could even use YouTube video thumbnails to make featured pictures.
If you have a lot of videos on your site, you may use them to gain more social followers on several major social networks. Using this WP plugin, you can certainly improve your:
- Facebook likes
- Twitter followers,
- Google+ followers
- LinkedIn connections
When you embed Youtube or Vimeo videos in your blog, this plugin locks the screen until the user selects a social action or waits a set amount of time. The locker’s settings can be changed to suit your needs.
The following are some of the plugin’s features:
- Plugin settings: You can activate or disable jQuery, choose a button layout, enable or disable video message, enter a custom message, choose an overlay pattern, enable or disable the close button, enable or disable the countdown, and set the countdown timer in seconds.
- Accounts on social media sites: The plugin works with YouTube, Vimeo, Facebook, Google+, Twitter, and LinkedIn.
- Support for shortcodes: Shortcodes allow you to place movies anywhere on your blog.
Also Read: How to Add Social Share Buttons in WordPress.
Conclusion
We hope this post has shown you how to add share buttons as overlay on YouTube videos in WordPress.
