Wil je weten hoe je een YouTube-video opent in een pop-up op WordPress?

La lichtbak of modaal venster (pop-up) is een veel voorkomende functie op het net. Het wordt echter over het algemeen gebruikt om afbeeldingen, e-mailregistratieformulieren, promoties of zelfs registratieformulieren weer te geven. 

Maar wist je dat het ook mogelijk is om er video's op te laten zien? WordPress ? Neen ? 

Geen zorgen, in deze tutorial laat ik je zien hoe je een video weergeeft (YouTube – Vimeo – enz.) dans une lichtbak.

Maar eerder, als je WordPress nog nooit hebt geïnstalleerd, ontdek je Hoe maak je een WordPress blog 7 stappen te installeren et Hoe te vinden, installeren en activeren van een WordPress theme op uw blog 

Ga dan terug naar waarom we hier zijn.

De redenen waarom u een lightbox om uw video's weer te geven 

de lichtbak zijn modale vensters, maar wat u niet weet, is dat niet alle afbeeldingen die erin worden weergegeven allemaal worden geladen tijdens de « chargement«  van de pagina. 

Le Navigateur lading   afbeeldingen wanneer het lichtbak wordt geopend, dit is ook het geval voor video's. Kortom, het is een functie die zullen uw pagina's sneller openen. Hiermee kunt u ook de grootte verkleinen (longueur) van uw paginaomdat een deel van de inhoud van deze pagina beschikbaar zal zijn in dit modale venster.

Wapenstilstand, laten we beginnen.

Hoe te installeren en configureren inpluggen WP Video Lightbox

WP Video Lightbox is een inpluggen beschikbaar op WordPress.org. Wat betekent dat u het rechtstreeks vanaf uw WordPress-dashboard kunt installeren, of download het als een ZIP-bestand.

Voor meer informatie bekijk onze stapsgewijze handleiding voor het installeren van een WordPress-plug-in.

Na het activeren van de inpluggen, ga vanaf deze locatie naar de instellingenpagina " instellingen >> Video lichtbak .

We gaan rechtstreeks naar de " prettyPhoto .

In werkelijkheid is dit inpluggen gebruik een andere inpluggen, die voornamelijk is bedoeld voor het weergeven van een fotogalerij. Maar je kunt een deel van de informatie wijzigen die op video's wordt toegepast.

Daarvoor zal ik enkele opties toelichten (Verplicht)Zodat het als u wilt.

Al de boekwinkel prettyPhoto moet worden geactiveerd (vink « Enable  prettyPhoto »)Om gebruikers te laten weten dat ze zich op dezelfde pagina bevinden, kunt u het venster transparant maken (definiëren een waarde van 0 tot 1. Komma-waarden worden geaccepteerd).

Ontdek De kenmerken van een effectieve pop-up voor WordPress 

Al uw lichtbakken kunnen een titel hebben die kan worden weergegeven (Zichtbaar titel). Soms moet u voor grote modale vensters het formaat wijzigen (Allow vergroten of verkleinen). En voor langere video's kunnen gebruikers deze vergroten (Allow Uitvouwen), om ze beter te bekijken.

Voor de breedte en hoogte van de lichtbak, u kunt de velden bewerken " verzuim Breedte "En" verzuim Hoogte . 

Om het thema van de te kiezen lichtbak, wijzig het vervolgkeuzemenu thema ". Het is ook mogelijk om autoplay te activeren (vink het vakje aan " Autoplay »).

open een YouTube-video in een pop-up - define-les-regalges

Hoe een te tonen lichtbak in een artikel

Le inpluggen stelt een lijst voor van shortcodes waarmee u kunt weergeven lichtbak in artikelen. Ik vergat je te vertellen dat je ook de video's kunt bekijken die beschikbaar zijn op Vimeo.

Om een ​​video te bekijken YouTube ou Vimeou moet de gebruiken shortcodes suivant:

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

Elk van deze shortcodes accepteert parameters, waarmee u:

  • Definieer de identificatie (video_id) van een video, meestal in deze indeling ' YzqKMmQ_3Sg . Voorbeelden [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Stel de hoogte van de video in (Hoogte)
  • Stel de breedte van de video in (Breedte)
  • Voeg een beschrijving toe (beschrijving)
  • Voeg een HTML-anker toe (anker), of tekst van de link die het venster opent
  • Voeg een miniatuur toe (auto_thumb)

Als u een HTML-anker instelt, wordt de miniatuur genegeerd. anders, auto_thumb neemt de waarde " 1 .

Ga verder door ook te ontdekken Hoe te gebruiken en te beheren shortcodes WordPress

Demo van een gebruik

Met wat ik je zojuist informatie heb gegeven, kun je een video weergeven met een code die lijkt op deze:

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

Voor een vergelijkbaar resultaat

presentatie-for-resultaten

U kunt een miniatuur weergeven zoals hierboven weergegeven met een code die lijkt op deze.

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480auto_thumb="1description="Par Dr WP"]

Voor een identiek resultaat als deze

miniatuur-duin-video

Voor het vertrek

Opgemerkt moet worden dat sommige parameters in de shortcodes overschrijft de waarden die in de instellingen zijn gedefinieerd.

Ontdek ook enkele premium WordPress-plug-ins  

U kunt andere gebruiken WordPress plugins om een ​​moderne uitstraling te geven en de afhandeling van uw blog of website te optimaliseren.

We bieden je hier enkele premium WordPress-plug-ins die je daarbij kunnen helpen.

1. FileBird

Bestandsvogel

Heb je ooit moeite gehad om duizenden afbeeldings-, video- of documentbestanden te beheren die je naar je WordPress FTP hebt geüpload? ja of nee, het maakt niet uit, het belangrijkste is om te weten dat de WordPress Plugin FileBird helpt u uw mediabestanden gemakkelijk te beheren en uw bibliotheek krachtiger te maken.

Dankzij de naadloze gebruikersinterface en het contextmenu kunnen gebruikers bestanden naar mappen slepen of de benodigde rechten hebben om snel mappen te maken, hernoemen of verwijderen op dezelfde manier als op uw computer. Met deze plug-in in de hand worden uw mediabestanden systematisch georganiseerd en kunt u eenvoudig een afbeelding selecteren om op een pagina in te voegen of deze te publiceren.

Ontdek ook onze 6 WordPress-plug-ins om uw artikelen nieuw leven in te blazen

Bovendien is deze plug-in volledig compatibel met de meest populaire plug-ins, vooral met WooCommerce, en ondersteunt ook een groot aantal talen. Dus als u het beheer van uw mediabibliotheek een boost wilt geven, is de WordPress Plugin FileBird zou je geheime wapen kunnen zijn.

Downloadendemonstratie web hosting

2. Social Share & Locker Pro

De Social Share & Locker Pro-extensie is ontworpen om uw website beter zichtbaar te maken op sociale netwerken. Met slechts een paar klikken kunt u de positie van uw sociale pictogrammen instellen of uw inhoud vergrendelen door te delen op een van de sociale netwerken die door u worden aangeboden.

Social Share Locker Pro WordPress-plug-in

Je hebt 10 sjablonen die de meest voorkomende wensen moeten dekken. Al haar modellen zijn perfect en werken wonderwel. Bovendien kunt u met Social Share & Locker Pro de volledige naam van sociale netwerken of alleen het pictogram weergeven. Het hangt af van uw ontwerp, de beschikbare ruimte of uw smaak.

Downloaden | demonstratie | web hosting

3. Contactformulier 7 Tooltips

deze WordPress-plug-in van de plug-in Contact Form 7 biedt een eenvoudige tooltip-functionaliteit voor uw plug-in Contact Form 7. De tooltips worden weergegeven wanneer de muisaanwijzer op het doelelement wordt geplaatst. Op mobiele apparaten geven tooltips aan wanneer het doelelement is ingeschakeld.

Contactformulier 7 knopinfo

De belangrijkste kenmerken zijn: gebruiksgemak, ondersteuning voor alle versies van Contactformulier 7, aanpassing van de achtergrondkleur van de tooltip, ondersteuning voor HTML-code, volledige lay-out responsief, en meer.

Downloaden | demonstratie | web hosting

Andere aanbevolen bronnen

We nodigen u ook uit om de onderstaande bronnen te raadplegen om verder te gaan in de greep en controle van uw website en blog.

Conclusie

Hier! Dat is alles voor deze tutorial, ik hoop dat het je helpt om YouTube- of Vimeo-video's weer te geven in een lightbox op uw WordPress-website. Aarzel niet om deel met je vrienden op je favoriete sociale netwerken

U kunt echter ook onze ressources, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie.

Maar vertel ons in de tussentijd over uw commentaires en suggesties in de speciale sectie.

...