Background Video voor YouTube en VIMEO

Terug

Background video voor YouTube en VIMEO

Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/video.php

Met de CrowlBgVideo-plugin kan je een film van YouTube of VIMEO in de achtergrond van een element plaatsen, het geluid dempen, er filters op toepassen en inhoud bovenop plaatsen.

1. Integreer jQuery in je webpagina

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

2. Installeer de VIMEO-api

De vimeo-api is noodzakelijk als je het geluid van een VIMEO-film wil dempen.

<script src="https://player.vimeo.com/api/player.js"></script>

3. Integreer de plugin.

Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.

<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v33-cv11152018"></script>

4. Je HTML voorbereiden

Voeg een <div>-element toe aan je pagina. Geef aan dit element een id of class (in het voorbeeld: "bgvideo"). Deze "div" dient als een soort van doos/wrapper waarin je de insluitcode plaatst.

Plaats in dat element twee onderliggende elementen:

De YouTube- of VIMEO-insluitcode.
Een tweede <div>-element met de inhoud die je bovenop de video wil plaatsen. Geef aan dit element een id (in dit geval "overlay").

<div id="bgvideo">
        <iframe src="https://www.youtube.com/embed/Nv36RaPrOrc" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen>
        </iframe>     
        <div id="overlay">
              <h3>Titel</h3>
        </div> 
</div>

5. De grootte van het element bepalen

Bepaal met CSS de grootte van de "wrapper".

#bgvideo{     
    width:200px;
    height:600px; 
}

6. De plugin activeren

Activeer tot slot de plugin.

$(function(){        
        $("#bgvideo").crowlBgVideo({
                filter: "grayscale(1)",
                overlay:"#overlay",
                automute:1,
                loop:1
        }); 
});

Maar opgelet, mobiele toestellen ondersteunen niet altijd het automatisch afspelen van films. Het heeft in dat geval geen zin om een film te laden op de achtergrond, als hij toch niet kan afgespeeld worden. Daarom moeten we een "fallback" voorzien om op zulke toestellen de video te verwijderen en te vervangen door een achtergrondafbeelding.

 isAutoplaySupported(function (supported) {
           if (supported) {
               // Autoplay wordt ondersteund
               console.log("supported");
               $("#bgvideo").crowlBgVideo({
                   automute: 1,
                   loop: 1,
                   overlay: "#bgvid",
                   center: 1
               });
           } else {
               // Geen ondersteuning voor autoplay
               $("#bgvideo").find("iframe").remove();
               $("#bgvideo").css("background-image", "url(images/vervangafbeelding.jpg)");
           }
 });

7. Opties

Optie	Doel	Waarde	Standaard
filter	Filtereffecten toepassen op het video-element.	Alle CSS3-filters.	/
overlay	HTML-inhoud bovenop de video plaatsen.	De id of class van het HTML-element dat je wil gebruiken. vb. #overlay, .content...	/
automute	Achtergrondvideo dempen	0 of 1	1
loop	Achtergrondvideo herhalen	0 of 1	1