Video als achtergrond
Achtergronden zijn meestal statisch. Soms is er wat beweging door het bewegen van de muis. Een enkele keer wordt een korte video als achtergrond gebruikt, zoals in het voorbeeld.
Inspiratie voor dit verhaal is gekomen door een artikel in Webdesigner Magazine 96 (juni 2017), pag. 14 t.m. 16.
Dit blad wordt sinds eind november 2017 niet meer gemaakt.
De auteur is niet bij het artikel genoemd. De code is niet meer beschikbaar op internet.
In het oorspronkelijke voorbeeld wordt een scene gebruikt uit de animatiefilm "Big Buck Bunny"; © copyright 2008, Blender Foundation / www.bigbuckbunny.org. Voor deze website heb ik hetzelfde filmpje gebruikt, alleen heb ik het geluid er vanaf gehaald.
Voor deze website heb ik aan het voorbeeld geen bijzondere aanpassingen gedaan.
De code kun je downloaden om zelf te gebruiken, echter zonder de achtergrondfilm. Daar moet je zelf voor zorgen.
- Er worden twee items besproken:
- De werking van het script.
- Toepassen in je eigen site.
- De werking van het script
- De code bestaat uit HTML (in het document) en CSS (in de file styles.css).
- Een deel van het voorbeeld werkt niet lekker met Internet Explorer, omdat de CSS voor het element <main>
niet goed wordt verwerkt door IE. De achtergrondvideo werkt echter correct.
- HTML
- De HTML bestaat uit een <video>-tag die de hele <body> bedekt. Daar bovenop ligt een <main>-tag
waar de content in zit.
De <video>-tag heeft de attributen autoplay (de film gaat uit zichzelf spelen), muted (het geluid staat uit) en loop (de film wordt steeds herhaald). - De <main>-tag bevat een <h1> voor de kop en een <nav> voor het menu.
- Het menu in de <nav>-tag bevat alleen <a>-tags.
- Het item Videofilmpjes op je website II: <video>-tag bevat een beschrijving van de <video>-tag.
- Het donkere, transparante blok in het midden is een variant van het item Dynamisch
achtergrond-effect.
Het verschil is: Het blok is hier een <main> in plaats van een <article>. Dat is mogelijk omdat de achtergrond(-film) helemaal los staat van de voorgrond.
- CSS
- De CSS begint met wat instellingen voor html (het hele document) en de body. De afmetingen zijn ingesteld op het hele window (100%) en de binnen- en buitenmarges zijn op nul gezet. Het lettertype (nodig voor het menu) wordt ingesteld. De letterkleur is wit.
- De achtergrond van de html en de body is doorzichtig. Dat is nodig om de het filmpje zichtbaar te maken.
- De minimum-afmetingen van video zijn 100%. De linker bovenhoek van de film wordt op 50% (hoogte en breedte) van
het window gezet. De linker bovenhoek van de video wordt vervolgens naar de linker bovenhoek van het window verplaatst met
- De video heeft z-index: -9999. Dat is om te zorgen dat de film echt op de achtergrond draait en dat alle andere elementen daar bovenop liggen.
- De eigenschappen van het semi-transparante blok in het midden van het window worden bepaald door main. De breedte is 75%, de volledige hoogte van het window wordt benut. Door margin: 0 auto 0 auto staat het blok netjes in het midden.
- De achtergrondkleur van het middenblok is zwart. Het is doorzichtig gemaakt met opacity: 0.4;
- De navigatie en de titel in nav bezet de hele breedte van de main>. Er is een binnenmarge van 2em.
- Alle elementen die afstammen van nav (dat zijn en <a>) dezelfde eigenschappen. Merk op dat het hover-effect alleen werkt bij <a>-tags.
- De menu-items hebben een rand van 0px breed. Die is wit en een streeplijn (dashed). Als je er met de muis overheen
gaat, verschijnt er een witte,solid, onderstreping van 0.5em breed. Zodra de muis niet meer over het item gaat verdwijnt
de streep. Doordat de onderstreping dashed was, ontstaat een bijzonder effect.
De overgang van niet-onderstreept naar onderstreept verloopt via een transition.
- Toepassen in je eigen site
- Regel een filmpje voor de achtergrond en maak het geschikt voor het web. Zie daarvoor het item Videofilmpjes op je website II: <video>-tag.
- Downlod de .zip-file en pak hem uit. Hernoem de file html573a.htm naar index.html of iets dergelijks.
- Zet de naam van de drie video-bestanden in de <src>-tags in index.html. Je hebt nu een werkend voorbeeld.
- Pas de opmaak van de pagina aan aan je eigen wensen. Wijzig de CSS, pas het menu aan (of verwijder het), enz.
- In het CSS-blok video kan alleen de achtergrondkleur worden veranderd. Laat de rest van dat blok ongemoeid.
- Het is beter de afmetingen van het CSS-blok html, body niet te veranderen. Laat ook background:transparent
intact. Met alle andere CSS kun je doen wat je wilt.
- De opmaak van het voorbeeld is geschikt als voorblad van een website. Zet er niet te veel content op, anders zie je de video niet meer.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code van het voorbeeld ziet er als volgt uit:
(Zet dit in de <HEAD>).
<link rel="stylesheet" href="styles.css">
(Zet dit in de <BODY>.
<video autoplay muted loop>
<source src="filmpje.mp4" type="video/mp4">
<source src="filmpje.ogv" type="video/ogg">
<source src="filmpje.webm" type="video/webm">
<p>Video is niet zichtbaar, HTML5 video wordt door
uw browser waarschijnlijk niet ondersteund.</p>
</video>
N.B. Als je meerdere videoformaten opgeeft moet je .mp4 boven aanzetten, zoals hieboven is gedaan. Dit, omdat het anders niet werkt met Chromium-browsers (o.a.Edge en Chrome) op Android.
Downloaden:
Druk op de knop:
File: voorb573.zip, 1149 bytes.
