Maak je eigen video header voor WordPress

Het gebruik maken van een video in de header van een website groeit in populariteit. Een video header kan de uitstraling die je aan de website wilt meegeven sterk vergroten.
Twee manieren zullen in deze blog besproken worden, door gebruik te maken van video dienst Vimeo en door middel van een eigen gehoste video.

Video header met gebruik van Vimeo

In header.php komt de volgende code.
Als de video geupload is op de website van vimeo kun je door middel van de share opties in Vimeo de video aanpassen en de iframe code genereren.

 

 

<div id="header">
<div class="video-container">
<div id="videotop"><iframe src="https://player.vimeo.com/video/id?autoplay=1&amp;loop=1&amp;title=0&amp
;byline=0&amp;portrait=0" width="1920" height="1080" allow="autoplay" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
</div></div>

In 2018 is er een update voor google Chrome geweest waardoor de video’s niet meer automatisch afspeelde. De wijziging hiervoor is opgenomen is deze tutorial (allow=”autoplay”)

In style.css geef je de video-container vorm en plaats je door middel van de “videotop” de video op de juiste positie, zodat wanneer de scherm resolutie word aangepast er geen zwarte balken boven en onder de video zichtbaar worden. De hoogte van de video is in dit voorbeeld 50% van de hoogte van het beeldscherm.

  #header {
 background: #f7f7f7;
 position: relative;
 z-index: 0;
 width: 100%;
 height: 50vh;
}

.video-container 
{ position:absolute; 
top:0%; 
left:0; 
z-index:-2; 
height:100%; 
width:100%; 
overflow:hidden; 
background:url('images/header-background.jpg');
background-position:50% 50%;
background-size:cover; }

#videotop {
    top: -25%;
 position:relative;
}

Video header met HTML 5

In header.php komt de volgende code

<div id="header">
<div class="video-container">
<video id="videotop" width="1920" height="1080" autoplay loop>
<source src="video/header.mp4" type="video/mp4" />
<source src="video/header.ogv" type="video/ogg" />
<source src="video/header.webm" type="video/webm" />
</video></div></div>

Achter de tag <video kunnen diverse opties ingevoerd worden om de video aan te passen naar eigen wens
autoplay = Automatisch afspelen van de video
preload = “Auto|metadata|none”, of de hele video automatisch geladen moet worden of alleen de metadata of niet automatisch laden
poster = Geeft de mogelijkheid om tijdens het laden van video een afbeelding weer te geven
controls = Laat de standaard atributen zien zoals “play” en “pause”
height & width = Geeft de hoogte en breedte van de video aan
loop = Laat de browser de video automatisch herhalen
muted = Dimmen van het geluid tijdens het afspelen van de video

Voor de volledige lijst en opties bekijk dan http://www.w3schools.com/tags/ref_av_dom.asp

Als de video alleen op de homepage van de website wordt weergegeven kun je nog de code tussen de volgende php tags plaatsen:

 

<?php if( is_front_page() ) : ?>

//video header code//

<?php endif;?>

Een andere mogelijkheid is de plugin “mb.YTPlayer for background videos“. Deze youtube player kun je gebruiken om een video header toe te voegen op je website.
1. Installeer en activeer de plugin.
2. Open een nieuwe pagina
3. In de editor vind je een knop voor de YTplayer
4. Vul de gegevens in voor de video

En genereer de shortcode voor de video.
Om deze shortcode te kunnen gebruiken in de header.php moet je gebruik maken van de volgende functie

<?php echo do_shortcode('[mbYTPlayer url="https://www.youtube.com/watch?v=Jr1mx9z87yk" opacity=".8" quality="hd720" ratio="16/9" isinline="true" playerwidth="1920" playerheight="1080" showcontrols="false" realfullscreen="true" printurl="true" autoplay="true" volume="0" mute="true" loop="true" addraster="true" stopmovieonblur="true" gaTrack="true"]'); ?>