Media-inhoud zoals video's, audio en andere multimedia-elementen kunnen een webpagina levendiger maken en een rijkere gebruikerservaring bieden. HTML biedt verschillende elementen waarmee je eenvoudig media-inhoud op je website kunt insluiten, rekening houdend met toegankelijkheid en optimalisatie.
<video>Met het <video>-element kun je videobestanden insluiten en afspelen op je webpagina. Het ondersteunt meerdere bronformaten om maximale compatibiliteit met verschillende browsers te garanderen.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Uw browser ondersteunt de video tag niet.
</video>
De controls attribuut voegt afspeelbedieningen toe zoals afspelen/pauzeren en volume. Overweeg het gebruik van ondertitels voor toegankelijkheid.
<audio>Net als video's, kun je ook audiobestanden insluiten met het <audio>-element.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Uw browser ondersteunt de audio tag niet.
</audio>
Bied tekstalternatieven aan voor audiobestanden om de toegankelijkheid te verbeteren.
Naast het hosten van je eigen media, kun je ook externe media insluiten, zoals YouTube-video's, met behulp van de <iframe> tag.
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen=""></iframe>
Vervang VIDEO_ID door de specifieke ID van de YouTube-video die je wilt insluiten.
Hoewel media een geweldige manier is om je content te verrijken, is het belangrijk om rekening te houden met de bestandsgrootte en formaten om ervoor te zorgen dat je website snel blijft laden en toegankelijk is voor alle gebruikers. Overweeg het comprimeren van media voor snellere laadtijden.
Met het toenemende gebruik van mobiele apparaten is het essentieel dat media-inhoud zich aanpast aan verschillende schermformaten. Hier zijn enkele technieken om media responsief te maken:
Om video's en audio-elementen responsief te maken, kun je gebruik maken van CSS. Een algemene methode is het gebruik van relatieve breedte en automatische hoogte.
video, audio {
max-width: 100%;
height: auto;
}
Iframes, zoals die worden gebruikt voor het insluiten van YouTube-video's, kunnen iets uitdagender zijn om responsief te maken vanwege hun vaste breedte en hoogte. Een gangbare oplossing hiervoor is het gebruik van een container met een padding hack.
.responsive-iframe-container {
position: relative;
overflow: hidden;
padding-top: 56.25%; /* Voor 16:9 ratio */
}
.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Je kunt je iframe vervolgens in de container plaatsen:
<div class="responsive-iframe-container">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen=""></iframe>
</div>
Met deze techniek zal je iframe zich aanpassen aan de breedte van zijn container, terwijl het de aspectverhouding behoudt.