How to Add Hover Share Buttons to YouTube Videos and Playlists in WordPress

Videos are a proven way to skyrocket user engagement on your WordPress site. A reader recently asked how to add share button overlays like those on Upworthy. As WordPress experts who've helped thousands implement custom features, we'll guide you through a simple shortcode to overlay share buttons on YouTube embeds that appear on hover.

Add Share Buttons as an Overlay on YouTube Videos

Instead of pasting HTML manually for each video, use this efficient shortcode. Add the following PHP code to a site-specific plugin or your theme's functions.php file:

function wpb_yt_buttons( $atts ) {
    $atts = shortcode_atts( array(
        'video' => '',
    ), $atts );

    $video_id = $atts['video'];
    $video_url = esc_url( 'https://youtu.be/' . $video_id );

    $output  = '<div class="video-container">';
    $output .= '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr( $video_id ) . '?rel=0" frameborder="0" allowfullscreen></iframe>';
    $output .= '<ul id="share-video-overlay">';
    $output .= '<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode( $video_url ) . '" target="_blank">Facebook</a></li>';
    $output .= '<li class="twitter"><a href="https://twitter.com/intent/tweet?url=' . urlencode( $video_url ) . '&text=Check out this awesome video!" target="_blank">Tweet</a></li>';
    $output .= '</ul>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'wpb-yt', 'wpb_yt_buttons' );

This shortcode embeds the YouTube video with hover-activated Facebook and Twitter share buttons linking to the video. Easily add more social platforms.

Use it by inserting the YouTube video ID like this:

[wpb-yt video="qzOOy1tWBCg"]

Grab the video ID from the YouTube URL:

The buttons appear as plain links initially. To style them into sleek buttons that fade in on hover, add this CSS to your child theme's stylesheet:

.video-container {
    position: relative;
    display: inline-block;
}
#share-video-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.25s ease;
    z-index: 500;
}
.video-container:hover #share-video-overlay {
    opacity: 1;
    transform: translateY(-10px);
}
#share-video-overlay li {
    margin: 5px 0;
    display: block;
}
.facebook {
    background-color: #3e5ea1;
    width: 70px;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
}
.facebook a,
.facebook a:link,
.facebook a:visited,
.facebook a:active,
.facebook a:hover {
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
}
.twitter {
    background-color: #00a6d4;
    width: 70px;
    padding: 8px 12px;
    border-radius: 4px;
    text-align: center;
    margin-top: 5px;
}
.twitter a,
.twitter a:link,
.twitter a:visited,
.twitter a:active,
.twitter a:hover {
    color: #fff !important;
    text-decoration: none;
    font-weight: bold;
}

That's it! Your YouTube videos now feature professional share overlays.

Add Share Buttons for YouTube Video Playlists

Readers loved this and requested playlist support. Use this enhanced code for both single videos and playlists:

function wpb_yt_buttons( $atts ) {
    $atts = shortcode_atts( array(
        'video' => '',
        'playlist' => '',
    ), $atts );

    if ( $atts['playlist'] != '' ) {
        $playlist_id = $atts['playlist'];
        $playlist_url = esc_url( 'https://www.youtube.com/playlist?list=' . $playlist_id );
        $embed_url = 'https://www.youtube.com/embed/videoseries?list=' . esc_attr( $playlist_id );
    } else {
        $video_id = $atts['video'];
        $playlist_url = $video_url = esc_url( 'https://youtu.be/' . $video_id );
        $embed_url = 'https://www.youtube.com/embed/' . esc_attr( $video_id ) . '?rel=0';
    }

    $output  = '<div class="video-container">';
    $output .= '<iframe width="560" height="315" src="' . $embed_url . '" frameborder="0" allowfullscreen></iframe>';
    $output .= '<ul id="share-video-overlay">';
    $output .= '<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode( $playlist_url ) . '" target="_blank">Facebook</a></li>';
    $output .= '<li class="twitter"><a href="https://twitter.com/intent/tweet?url=' . urlencode( $playlist_url ) . '&text=Check out this playlist!" target="_blank">Tweet</a></li>';
    $output .= '</ul>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'wpb-yt', 'wpb_yt_buttons' );

For playlists, include both IDs:

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

Extract IDs from the playlist URL:

Share Your WordPress Post URL Instead of Video

To share the post permalink rather than the YouTube link, use this version:

function wpb_yt_buttons( $atts ) {
    $atts = shortcode_atts( array(
        'video' => '',
    ), $atts );

    $video_id = $atts['video'];
    $post_url = urlencode( get_permalink() );
    $post_title = urlencode( get_the_title() );

    $output  = '<div class="video-container">';
    $output .= '<iframe width="560" height="315" src="https://www.youtube.com/embed/' . esc_attr( $video_id ) . '?rel=0" frameborder="0" allowfullscreen></iframe>';
    $output .= '<ul id="share-video-overlay">';
    $output .= '<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=' . $post_url . '" target="_blank">Facebook</a></li>';
    $output .= '<li class="twitter"><a href="https://twitter.com/intent/tweet?url=' . $post_url . '&text=' . $post_title . '" target="_blank">Tweet</a></li>';
    $output .= '</ul>';
    $output .= '</div>';

    return $output;
}
add_shortcode( 'wpb-yt', 'wpb_yt_buttons' );

Customize CSS or shortcodes further as needed. For better performance, make videos responsive with FitVids, hide end screens, or generate featured images from thumbnails.

This method has helped countless sites boost shares. Which networks will you add? Drop a comment below!