tutorials

Hoe Share-knoppen toevoegen als overlay op YouTube-video's in WordPress

Hoe Share-knoppen toevoegen als overlay op YouTube-video's in WordPress / tutorials

Video's zijn een van de beste manieren om de betrokkenheid van gebruikers te vergroten. Onlangs vroeg een van onze gebruikers ons naar een manier om overlays met deelknoppen te maken op video's die lijken op de populaire website UpWorthy. In dit artikel laten we je zien hoe je deelknoppen kunt toevoegen als overlay op YouTube-video's in WordPress.

Voorbeeld van hoe het eruit zou zien:

Knoppen voor delen toevoegen als overlay op YouTube-video's

Er waren verschillende manieren om dit te doen. De meeste manieren vereisen dat u elke keer dat u een video toevoegt, een stukje HTML-code plakt. In plaats van dat te doen, hebben we besloten om een ​​shortcode te maken die dit overlay-effect zou automatiseren.

Kopieer en plak de volgende code in een sitespecifieke plug-in of het bestand functions.php van uw thema: 

 /// WPBeginner's YouTube Share Overlay-knoppenfunctie wpb_yt_buttons ($ atts) // Haal de video-ID op uit shortcode-extract (shortcode_atts (array ('video' => "), $ atts)) // Video weergeven $ string = ' '; // Facebook-knop voor delen delen $ string. ='
  •  Facebook
    • '; // Knop Tweet toevoegen $ string. = '
  • gekwetter
'; // Sluit video-container $ string. = ''; // Return-uitvoer retourneert $ string;  // Korte code toevoegen add_shortcode ('wpb-yt', 'wpb_yt_buttons');

Deze code maakt een shortcode die automatisch twitter- en facebook-links koppelt aan je video's. Deze knoppen zijn alleen zichtbaar als de gebruiker met de muis over de video gaat. Je kunt het ook gebruiken om andere sociale media-kanalen toe te voegen.

Om deze shortcode te gebruiken, volstaat het om de YouTube-video-ID in de shortcode toe te voegen als volgt:

[wpb-yt video = "qzOOy1tWBCg"]

Je kunt de YouTube-video-ID ophalen uit de URL-reeks. Zoals dit:

Wanneer je nu een video toevoegt, kun je je YouTube-video en platte tekstlinks zien om de video op Facebook of Twitter te delen. U zult opmerken dat deze links helemaal niet zijn gestileerd.

Dus laat deze koppelingen stijlen om knoppen te maken, dus het ziet er een beetje leuker uit. We verbergen deze knoppen ook en laten ze alleen verschijnen als een gebruiker met zijn muis op de video-container klikt. Voeg hiervoor de volgende CSS toe aan de stylesheet van uw Child Theme. 

 # share-video-overlay position: relative; rechts: 40px; top: -190 px; list-style-type: none; weergave: blok; dekking: 0; filter: alpha (opacity = 0); -webkit-overgang: dekking .4s, top .25s; -moz-overgang: dekking .4s, top .25s; -o-transition: opacity .4s, top .25s; overgang: opacity .4s, top .25s; z-index: 500;  # share-video-overlay: hover opacity: 1; Filter: alfa (opaciteit = 100);  .share-video-overlay li margin: 5px 0px 5px 0px;  #facebook color: #ffffff; achtergrondkleur: # 3e5ea1; breedte: 70 px; opvulling: 5px;  .facebook a: link, .facebook a: active, .facebook a: visited color: #fff; text-decoration: none;  #twitter background-colour: # 00a6d4; breedte: 70 px; opvulling: 5px;  .twitter a, .twitter a: link, .twitter a: active, .twitter a: visited, .twitter a: hover color: #FFF; text-decoration: none;

Dat is alles. Nu zou je overlay-knoppen moeten hebben op je YouTube-video's in WordPress.

Knoppen voor delen toevoegen als overlay voor YouTube-video-afspeellijsten in WordPress

Na het publiceren van dit artikel vroegen veel van onze lezers, hoe deze code kan worden aangepast om te werken voor YouTube-afspeellijsten en video's. Als je YouTube-video's en afspeellijsten op je WordPress-site insluit, moet je deze code gebruiken. 

 / * * WPBeginner's Share Overlay-knoppen * op YouTube-video's en afspeellijsten * / functie wpb_yt_buttons ($ atts) // Haal de id's voor de video en de afspeellijst uit het shortcode-extract (shortcode_atts (array ('video' => ", 'playlist' => ",), $ atts)); // Controleer of een afspeellijst-ID voorzien is van shortcode als (! $ Playlist == "): // Toon video-afspeellijst $ string = ''; // Voeg Facebook-knop $ string. = 'Toe
  • Facebook
    • '; // Twitter-knop toevoegen $ string. = '
  • gekwetter
'; // Sluit video-container $ string. = ''; // Als er geen afspeellijst-ID wordt verstrekt, anders: // Geef video weer $ string. = ''; // Facebook-knop $ string. = 'Toevoegen
  •  Facebook
    • '; // Twitter-knop toevoegen $ string. = '
  • gekwetter
'; // Sluit video-container $ string. = ''; stop als; // Return-uitvoer retourneert $ string;  // Voeg shortcode add_shortcode toe ('wpb-yt', 'wpb_yt_buttons');

Gebruik de bovenstaande code om een ​​afspeellijst met overlappende deelknoppen toe te voegen. Om uw afspeellijst weer te geven, moet u het ID van de video en de afspeellijst in de shortcode als volgt opgeven:

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

Je kunt je video- en afspeellijst-ID's krijgen door naar de afspeellijst op YouTube te gaan en de lijst-ID van de URL te kopiëren, zoals deze:

Toevoegen van WordPress Post Link in Share Button Overlay op YouTube-video's

Nadat we dit artikel publiceerden, vroegen sommige van onze gebruikers dat ze de deelknoppen wilden gebruiken om de link van hun WordPress-bericht te delen in plaats van de YouTube-videolink. Om dat te doen moet je de video-URL in deelknoppen vervangen door de permalink van het WordPress-bericht. Gebruik deze code in uw functions.php of site-specifieke plug-in:

 /// WPBeginner's YouTube Share Overlay-knoppenfunctie wpb_yt_buttons ($ atts) // Haal de video-ID op uit shortcode-extract (shortcode_atts (array ('video' => "), $ atts)) // Video weergeven $ string = ' '; // Krijg bericht permalink en codeer URL $ permalink_encoded = urlencode (get_permalink ()); // Voeg Facebook share button $ string. =' Toe
  •  Facebook
    • '; // Knop Tweet toevoegen $ string. = '
  • gekwetter
'; // Sluit video-container $ string. = ''; // Return-uitvoer retourneert $ string;  // Korte code toevoegen add_shortcode ('wpb-yt', 'wpb_yt_buttons');

U kunt de CSS of de shortcode-fragmenten naar eigen wens aanpassen. Om je video's verder te optimaliseren, kun je je YouTube-video's responsief maken met de plug-in FitVids jQuery. Je kunt ook gerelateerde video's uitschakelen die aan het einde van de video verschijnen. of maak zelfs aanbevolen afbeeldingen van YouTube-videominiaturen.

We hopen dat dit artikel u heeft geholpen om aangepaste deelknoppen als overlay toe te voegen aan YouTube-video's in WordPress. Laat ons weten welke social-mediakanalen je van plan bent toe te voegen aan je video's door hieronder een reactie achter te laten.