How to add share buttons as overlay on YouTube videos in WordPress

Videos are one of the best ways to increase user engagement. Recently, one of our users asked us about a way to create share button overlays on videos similar to the popular UpWorthy site. In this article, we will show you how to add share buttons as an overlay on YouTube videos in WordPress.

Example of what it would look like:

Add share buttons as an overlay on YouTube videos

There were several ways to do this. Most forms require you to paste a bit of HTML code each time you add a video. Rather than do this, we decided to create a shortcode that would automate this overlay effect.

Simply copy and paste the following code into a site-specific plugin or your theme's functions.php file:

 /// Función de botones de superposición de compartir de YouTube de WPBeginner wpb_yt_buttons ($ atts) // Obtener el ID de video del extracto de shortcode (shortcode_atts (array ('video' => ",, $ atts)); // Display video $ string = ' '; // Agregar el botón de compartir de Facebook $ cadena. ='
 Facebook
'; // Añadir botón de Tweet $ cadena. = '
Pío
'; // Cerrar video string $ string. = ''; // Retorno de salida return $ cadena; // Añadir el Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons'); 

This code creates a shortcode that automatically adds Twitter and Facebook links to your videos. These buttons are only visible when the user hovers the mouse over the video. You can use it to add any other social media channels as well.

To use this shortcode, all you need to do is add the YouTube video ID to the shortcode like so:

[wpb-yt video = "qzOOy1tWBCg"]

You can get the YouTube video ID from the URL string. I like this:

Now when you add a video, you will be able to see your YouTube videos and plain text links to share the video on Facebook or Twitter. You will notice that these links are not styled at all.

So let's style these links to create buttons, to make it look a little better. We'll also hide these buttons and make them appear only when a user hovers their mouse over the video container. To do this, add the following CSS to your child theme's style sheet.

 # share-video-overlay position: relative; derecha: 40px; arriba: -190px; tipo de estilo de lista: ninguno; bloqueo de pantalla; opacidad: 0; filtro: alfa (opacidad = 0); -webkit-transición: opacidad .4s, top .25s; -moz-transición: opacidad .4s, top .25s; -o-transición: opacidad .4s, top .25s; transición: opacidad .4s, top .25s; índice z: 500; # share-video-overlay: hover opacity: 1; filtro: alfa (opacidad = 100); .share-video-overlay li margen: 5px 0px 5px 0px; #facebook color: #ffffff; color de fondo: # 3e5ea1; ancho: 70px; relleno: 5px; .facebook a: enlace, .facebook a: activo, .facebook a: visitó color: #fff; texto-decoración: ninguno; #twitter background-color: # 00a6d4; ancho: 70px; relleno: 5px; .twitter a, .twitter a: enlace, .twitter a: activo, .twitter a: visitado, .twitter a: hover color: #FFF; texto-decoración: ninguno; 

That is all. You should now have share buttons overlaid on your YouTube videos in WordPress.

Add share buttons as overlay for YouTube video playlists in WordPress

After publishing this article, many of our readers asked how this code could be modified to work with YouTube playlists and videos. If you embed YouTube videos and playlists on your WordPress site, you should use this code instead.

 / * * Botones de superposición de recursos compartidos de WPBeginner * en Videos y listas de reproducción de YouTube * / function wpb_yt_buttons ($ atts) // Obtenga los identificadores de video y lista de reproducción del extracto de shortcode (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Verifique si una identificación de la lista de reproducción se proporciona con el código corto if (! $ Playlist == "): // Mostrar la lista de reproducción del video $ string = ''; // Agregar el botón de Facebook $ string. = '
Facebook
'; // Añadir botón de Twitter $ cadena. = '
Pío
'; // Cerrar video string $ string. = ''; // Si no se proporciona una ID de lista de reproducción, de lo contrario: // Mostrar video $ cadena. = ''; // Añadir botón de Facebook $ cadena. = '
 Facebook
'; // Añadir botón de Twitter $ cadena. = '
Pío
'; // Cerrar video string $ string. = ''; terminara si; // Retorno de salida return $ cadena; // Añadir el shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons'); 

Using the code above you can also add a playlist with overlay share buttons. To display your playlist you will need 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 the playlist ID from the URL, like this:

Add WordPress Post Link in Share Overlay Button in YouTube Videos

After we published this article, some of our users asked that they would like the share buttons to share their WordPress post link instead of the YouTube video link. To do so, you need to replace the video URL in the share buttons with the permalink from the WordPress post. Use this code in your functions.php or site specific plugin:

 /// Función de botones de superposición de compartir de YouTube de WPBeginner wpb_yt_buttons ($ atts) // Obtener el ID de video del extracto de shortcode (shortcode_atts (array ('video' => ",, $ atts)); // Display video $ string = ' '; // Obtener publicación permalink y codificar URL $ permalink_encoded = urlencode (get_permalink ()); // Agregar el botón de compartir de Facebook $ cadena. ='
 Facebook
'; // Añadir botón de Tweet $ cadena. = '
Pío
'; // Cerrar video string $ string. = ''; // Retorno de salida return $ cadena; // Añadir el Shortcode add_shortcode ('wpb-yt', 'wpb_yt_buttons'); 

Feel free to modify the CSS or shortcode snippets to suit your needs. To further optimize your videos, you can make your YouTube videos responsive with the FitVids jQuery plugin. You can also disable related videos that appear at the end of the video. or even create featured images from YouTube video thumbnails.

We hope this article helped you add custom share buttons as an overlay on YouTube videos in WordPress. Let us know which social media channels you're planning to add in your videos by leaving a comment below.