WordPress: hoe maak je een video Facebox-pop-up

Vimeo- en YouTube-video's bieden nu video's met een hogere resolutie die behoorlijk wat onroerend goed op een website of blog kunnen in beslag nemen. Een manier om hiervoor te optimaliseren, is door een methode te gebruiken die Facebox wordt genoemd. Een facebox is een leuke manier om een ​​venster op uw pagina weer te geven zonder een apart pop-upvenster.

levenslijn-video-button.png

Lifeline-datacenters lieten een video produceren door Another Cool Design die ze op hun startpagina wilden presenteren - zonder het thema te hoeven verplaatsen of opnieuw te ontwerpen. Dus - we hebben een mooie kleine afbeelding gemaakt met een grote afspeelknop erop en code die een stijlvol venster genereert om de video erin weer te geven.

levenslijn-video-facebox.png

Implementatie was eenvoudig met behulp van de WordPress Facebox Gallery-plug-in van Truimage. Ik heb een externe pagina (video.html) in de root van de site met de video (met autoplay = 1 zodat deze automatisch wordt afgespeeld wanneer deze wordt geopend), en voegde vervolgens een tekstwidget toe met het benodigde fragment.

<a href="video.html" rel = "facebox" onclick = "javascript: pageTracker._trackPageview ('/ special / mijnpagina');">

Het rel = facebox aanwijzing is wat de code initieert zodra op de link wordt geklikt. Het opent de video-facebox die onmiddellijk begint te spelen. Het is een eenvoudige implementatie en een gemakkelijke oplossing voor het insluiten van een of meer video's op een pagina. We zullen deze methode zeer binnenkort op een andere site gebruiken!

OPMERKING: het is belangrijk om het aantal weergaven met de video vast te leggen binnen die van de klant analytics (Google Analytics), dus hebben we ook een onclick-gebeurtenis aan de ankertag toegevoegd. Als mensen nu op de video klikken, krijgen we een 'virtuele' paginaweergave. Ik heb de bovenstaande code toegevoegd.

3 reacties

  1. 1

    Bedankt voor het schrijven van een tutorial. Hopelijk zal het enkele dingen ophelderen voor het implementeren van inline-inhoud in een facebox-pop-up. 🙂

  2. 2

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.