Maak video’s responsive: oplossingen voor IFrames en HTML5
Er zijn verschillende manieren om video’s te tonen op je website. Je kunt zelf video’s hosten en presenteren met een HTML5 <video> tag. In veel gevallen gebruik je diensten als Youtube of Vimeo om video’s met een IFrame (embed code) in te sluiten op je website. Maar wat als je website responsive is? Schaalt je video dan wel automatisch mee naar kleinere schermen?
Het IFrame-probleem
Twitter, Facebook en Soundcloud hebben hun embed code responsive gemaakt. Helaas geldt dat niet voor Youtube, Vimeo, Google Maps of Instagram. Zij gebruiken de IFrame als embed code. In deze code ga je uit van een statische breedte en hoogte:
<iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/UKX0ztogZkM?rel=0″ frameborder=”0″ allowfullscreen></iframe>
De video schaalt dus niet automatisch mee met de schermgrootte. De hoogte en breedte zijn verplichte condities. Vul je de hoogte niet in dan geeft je browser een automatische hoogte aan van 150px. Daardoor valt een deel van de video weg. Hoe zorg je ervoor dat een video zich soepel aanpast aan de grootte van het scherm? Lees enkele oplossingen voor een vloeiende beweging van video’s in een responsive website.
Oplossingen responsive video’s HTML5 en IFrames
HTML5
Maak je gebruik van het HTML5 video-element? Dan is een vloeiende beweging makkelijk. De developer lost dit op in de stylesheet (CSS3). De breedte in de video container geef je weer in een percentage en de hoogte past zich daarop aan.
video {max-width: 100%; height: auto;}
IFrames
Deze simpele methode in CSS3 gaat niet op voor IFrames vanwege de statische en verplichte hoogte en breedte (iframe width=”560″ height=”315″) in de code. Een paar oplossingen om deze hardnekkige IFrames aan te pakken:
- Media query: Jquery FitVid.js
Met de media query FitVid.js maak je video’s responsive. De developer implementeert een stukje javascript op de website met speciale condities om IFrames mee te schalen met de rest van de website. Aanbieders zoals Youtube en Vimeo worden toegevoegd aan het script. Deze oplossing is te implementeren binnen elk cms. - Plugins (WordPress, Joomla!)
Voor een open source-cms als WordPress of Joomla! bestaan speciale plugins voor responsive video’s. Maak jij gebruik van zo’n cms dan installeer je zonder enige technische kennis deze handige plugins. Responsive Video Embeds en Responsive Video doen de truc voor WordPress. En in Joomla! maak je video’s responsive met AllVideos. - Embed Responsively: genereer online je responsive code
Geen developer en geen plugin te vinden voor jouw website? Bekijk dan eens deze handige online oplossing: Embed Responsively. Geen ingewikkelde scripts of het installeren van plugins op je website. Met deze oplossing genereer je direct online de responsive code voor Youtube, Vimeo, maar ook voor Google Maps. Heel simpel. Voer de Youtube-url in en via de knop ‘embed’ verschijnt jouw responsive code. Plak deze html-code in je website en je video is responsive.
Vraag bij de bouw van een nieuwe responsive website nadrukkelijk hoe het responsive maken van video’s, afbeeldingen, maar ook bijvoorbeeld formulieren is uitgedacht en weeg af welke oplossing het beste past bij jouw website.
