Tegenwoordig zie je steeds meer websites, waarop een video als achtergrond draait. Dit kan je doen door een video eerst te uploaden. Een nadeel van deze methode is dat je hierdoor veel ruimte op je server in gebruik neemt voor de betreffende video. Ook is het veranderen van de video ingewikkelder omdat je eerst de nieuwe video op je server moet uploaden en de code vervolgens weer moet aanpassen in de html. Eenvoudiger is door een link te maken naar Youtube. Dit bespaart ook ruimte. De code die je kunt gebruiken is een combinatie van html en css, zonder het gebruik van jquery. De html code is.

 

 <div id="vidtop-content">
<div class="vid-info">Plaats hier jouw beschrijvende tekst</div>
</div>       
 

Waar nu de rode tekst staat vul je het nummer in van de youtube video die je wil gebruiken. Dat is de code die je bovenin de url van yotube ziet na v=… De css code is: /*video */ * { box-sizing: border-box; } .video-background { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; } .video-foreground, .video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } /* video --> */ De video wordt als achtergrond getoond, dat betekent dat tekst of andere content er dus overheen wordt gezet. Wil je dat de video wat meer tot zijn recht komt, plaats dan flink wat
codes zodat er genoeg ruimte onstaat om de video te laten zien. Je kunt de video aanvullen met een leuke beschrijvende tekst ernaast, zoals wij ook op onze eigen homepage hebben gedaan. Dit doe je doot onder de html video code de volgende code te zetten:

De css die kunt aanvullen is: #vidtop-content { top: 0; color: #fff; } .vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: 'Roboto', Helvetica, sans-serif; } .vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; } .vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; } @media (min-aspect-ratio: 16/9) { .video-foreground { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { .video-foreground { width: 300%; left: -100%; } } @media all and (max-width: 600px) { .vid-info { width: 50%; padding: .5rem; } .vid-info h1 { margin-bottom: .2rem; } } @media all and (max-width: 500px) { .vid-info .acronym { display: none; } } /* video --> */ Het enige nadeel van het gebruik van youtube video is dat deze niet automatisch afspeelt op tablet en mobiel.

Cookies make it easier for us to provide you with our services. With the usage of our services you permit us to use cookies.