Speel een video als achtergrond af

Gebruik de HTML5 video-tag voor een video die als achtergrond van de paginacontent afgespeeld wordt

Zoals te zien op brand.denso.com

Denso-site

1. HTML-document

Begin je project met een HTML-document, met secties voor de head en body. In de head-sectie zet je de onzichtbare documenttitel en een link naar de externe stylesheet. In de body-sectie komt de zichtbare inhoud, die je definieert bij de stappen 2 en 3.




Video | Image | Content



*** HIER STAP 2

2. Voorgrond-content

Omwille van SEO zet je de hoofdinhoud van de pagina aan het begin van de body-sectie. De tekstinhoud en afbeeldingen voor de pagina worden op de gebruikelijke manier gedefinieerd. Gebruik de tag ‘main’ om de content in te sluiten, zodat de positie via CSS makkelijk kan worden bepaald ten opzichte van de achtergrondvideo.

3. Achtergrondvideo

De achtergrondvideo is opgebouwd uit een video-element dat automatisch in een loop wordt afgespeeld, zonder geluid. Dat wordt gedaan met de attributen ‘autoplay’, ‘muted’ en ‘loop’ voor de video-container. De browser kiest automatisch de eerste videobron die hij ondersteunt om af te spelen.






4. De stylesheet

Maak een nieuw bestand met de naam styles.css voor de opmaak. Daarin zorg je dat de container van het HTML-document en de inhoud van de body-sectie het gehele zichtbare browservenster beslaan en stel je de standaardkleuren en het lettertype in. Voor stap 5 is een transparante achtergrond nodig.

html,body{display: block; width: 100%; height: 100%; margin: 0; padding: 0; font-family: Helvetica, sans-serif; background: transparent; color: #fff; }

5. Videogrootte en positie

De video moet altijd achter de pagina-content weergegeven worden. Dat doe je via absolute positionering met een z-index van -1 om de video onder de document-body te plaatsen. De video bedekt het hele documentvenster dankzij het gebruik van ‘transform’, ‘width’ en ‘height’ om de afmetingen te schalen vanuit het midden van het paginavenster.

video { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; z-index: -9999; transform: translateX(-50%) translateY(-50%); background: #000; }

6. Content-container

De container voor de content wordt zodanig weergegeven dat de content niet onleesbaar wordt door de video. Er wordt een semitransparante achtergrondkleur toegepast op de ‘main’ container. Ook die wordt geschaald op de maximale hoogte van het venster en gecentreerd door voor horizontale marges de breedte ‘auto’ te gebruiken.

main { background: rgba(0,0,0,0.5); padding: 2em; width: 75%; min-height: 100%; margin: 0 auto 0 auto; }

7. Ronde afbeeldingen

Een laatste regel voor de presentatie is het gebruik van ‘rounded’ afbeeldingen. Daarbij wordt een maximale border-radius toegepast om afgeronde hoeken van de afbeelding te knippen. Op die manier hoef niet alle PNG-afbeeldingen transparant te maken. Die zijn namelijk niet zo makkelijk te wijzigen en leiden tot grotere bestanden dan JPG’s.

.round{ border-radius: 100%; }

Download de bijbehorende bestanden en de volledige code hier en pak ze uit.

Webdesigner 97: CSS4 en HTML5.1, Sketch, Responsive lay-outs

Webdesign en -ontwikkeling zijn constant in beweging. Specificaties van standaarden worden bijgewerkt met nieuwe functies die je meer ontwerpmogelijkheden dan ooit geven. Houd je deze ontwikkelingen niet bij, dan loop je achter de feiten aan en mis je heel veel moois. In Webdesigner 97 bespreken we onder andere de nieuwe standaarden CSS4 en HTML5.1, leggen we uit wanneer je voor jQuery of JavaScript kiest en vertellen we je de best practices voor JavaScript.

Koop direct in onze webshop!

Deel dit artikel of reageer