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.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
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>
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>
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:
<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>
Bepaal met CSS de grootte van de "wrapper".
#bgvideo{ width:200px; height:600px; }
Activeer tot slot de plugin.
$(function(){ $("#bgvideo").crowlBgVideo({ filter: "grayscale(1)", overlay:"#overlay", automute:1, loop:1 }); });
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)");
}
});
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 |