Monday, November 30, 2020
Home Blogging How to Add Share Buttons as Overlay on YouTube Videos in WordPress

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

videos are among the finest methods to spice up consumer engagement. Lately one in all our customers requested us a couple of strategy to create share button overlays on movies much like the favored website UpWorthy. On this article, we are going to present you add share buttons as overlay on YouTube movies in WordPress.

Including Share Buttons as Overlay on YouTube Videos

There have been a number of ways in which this may very well be carried out. Most methods would require you to stick a bits of HTML code each time you add a video. As an alternative of doing that, we determined to create a shortcode that will automate this overlay impact.

Merely copy and paste the next code in a site-specific plugin or your theme’s capabilities.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/// example'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&amp;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 routinely provides twitter and fb share hyperlinks to your movies. These buttons are solely seen when the consumer brings their mouse over the video. You need to use it add another social media channel as nicely.

To make use of this shortcode, all you will want to do is add the YouTube video ID within the shortcode like this:

[wpb-yt video="qzOOy1tWBCg"]

You will get the YouTube video ID from the URL string. Like this:

Now if you add a video, it is possible for you to to see your YouTube video and plain textual content hyperlinks to share the video on Fb or Twitter. You’ll discover that these hyperlinks aren’t styled in any respect.

So lets model these hyperlinks to create buttons, so it appears to be like a bit nicer. We may even conceal these buttons and make them seem solely when a consumer takes their mouse on the video container. To do that add the next CSS to your Youngster Theme‘s stylesheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
#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 it’s best to have share buttons overlay in your YouTube movies in WordPress.

Including Share Buttons as Overlay for YouTube Video Playlists in WordPress

After publishing this text lots of our readers requested, how this code might be modified to work for YouTube playlists in addition to movies. Should you embed YouTube movies in addition to playlists in your WordPress website, then it’s best to use this code as an alternative.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*
* example'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&amp;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&amp;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');

Utilizing the code above you too can add a playlist with overlaying share buttons. To show your playlist you’ll have to present the video id and playlist id within the shortcode like this:

[wpb-yt video="exP9N3rIfV0" playlist="UUhA624rCabHAmd6lpkLOw7A"]

You will get your video and playlist IDs by visiting the playlist on YouTube and copying listing ID from the URL, like this:

Including WordPress Put up Hyperlink in Share Button Overlay on YouTube Movies

After we printed this text, a few of our customers requested that they want the share buttons to share their WordPress publish’s hyperlink as an alternative of YouTube video hyperlink. To try this you want to substitute the video URL in share buttons with the WordPress publish’s permalink. Use this code in your capabilities.php or site-specific plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/// example'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&amp;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');

Be happy to change the CSS or the shortcode snippets to satisfy your wants. To additional optimize your movies, you may make your YouTube movies responsive utilizing FitVids jQuery plugin. You may also flip off associated movies that seem on the finish of the video. and even create featured pictures from YouTube video thumbnails.

You May Also Like : How to Randomly Display Registered Users in WordPress

We hope that this text helped you add customized share buttons as overlay on YouTube movies in WordPress. Tell us which social media channels you might be planning so as to add in your movies by leaving a remark under.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

How to Signup for Godaddy Affiliate Program & Start Making Money

GoDaddy is likely one of the well-liked model names out there of area and web-hosting. They are well-liked for a numerous cause, and so they...

How To Start Selling Website on Flippa: A Beginner’s Guide To Success

If you may have been working on-line for lengthy and into Website flipping, Flippa is one identify that you need to have heard of. Flippa is a...

How to Fix Your Connection is Not Private Error (Site Owners Guide)

Are you seeing ‘Your connection is not private’ error in your WordPress web site? This is the error message you’ll see on Google Chrome. The...

How to Fix the WordPress White Page of Death (Step by Step)

The WordPress white page of dying is one of the most widespread WordPress errors. It can also be one of the most irritating ones as...

Recent Comments