Door naar hoofdmenu

Hoe kan ik een Youtube video openen in een pop-up op WordPress

Divi: het gemakkelijkste te gebruiken WordPress-thema

Divi: Het beste WordPress-thema aller tijden!

Meer 901.000-downloads, Divi is het populairste WordPress-thema ter wereld. Het is compleet, gemakkelijk te gebruiken en wordt geleverd met meer dan 62-vrije sjablonen. [Aanbevolen]

Wilt u weten hoe u 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, formulieren voor het vastleggen van e-mail, 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 actief zijn (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).

Creëer eenvoudig uw website met Elementor

Met Elementor kunt u eenvoudig elk website-ontwerp maken met een professionele uitstraling. Stop met betalen duur voor wat je zelf kunt doen. [Gratis]

Ontdek De kenmerken van een effectieve pop-up voor WordPress 

Al uw lichtbakken kunnen een titel hebben die kan worden weergegeven (Producten per pagina 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 uitbreiden), 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] (voor YouTube)
[video_lightbox_vimeo5] (Voor 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 = "One eenvoudige video " description = "By Dr. WP "]

Voor een vergelijkbaar resultaat

Verspil geen tijd en geld!

Ontdek de beste tool om uw blog, uw webwinkelblog of een andere website in slechts een paar klikken te maken!

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 = "By 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 WordPress-plug-ins gebruiken om een ​​moderne look te geven en de grip van uw blog of website te optimaliseren.

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

1. FileBird

Heb je ooit moeite gehad om duizenden afbeeldings-, video- of documentbestanden te beheren die je hebt geüpload naar je WordPress FTP? ja of nee, wat dan ook, het belangrijkste is om te weten dat de WordPress FileBird-plug-in u helpt uw ​​mediabestanden gemakkelijk te beheren en uw bibliotheek meer kracht geeft.FileBird

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, kan de FileBird WordPress-plug-in uw geheime wapen 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-extensie van de Contact Form 7-plug-in biedt de mogelijkheid om eenvoudig tooltips toe te voegen aan uw Contact Form 7-plug-in. De tooltips worden weergegeven wanneer het doelelement wordt verplaatst. Op mobiele apparaten geven tooltips aan wanneer het doelitem 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 de tip met je vrienden op je 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.

...

Dit artikel bevat opmerkingen 7

  1. Hallo,
    Ik ben op zoek naar een manier om een ​​video-pop-up weer te geven na een klik op een knop. Is het mogelijk om dat te doen met WP Video Lightbox?

    Dankjewel.
    Met vriendelijke groet,

  2. Hallo,
    Heel erg bedankt voor deze goed opgebouwde tutorial, ik wilde weten of het mogelijk was om video's van andere platforms dan You Tube en Vimeo (Openload-voorbeeld) toe te voegen of dat er een limiet zou zijn.

    vriendelijke groeten

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Meer informatie over hoe uw opmerkingen worden gebruikt.

Terug naar boven
7 aandelen
aandeel5
gekwetter
Enregistrer2