Responsive YouTube video

Een Responsive YouTube video op je WordPress website

Over het goed plaatsen (embedden) van Vimeo of Youtube video’s krijgen wij van WordPress Helpdesk Nederland de meest vragen. Een Responsive YouTube video op je WordPress website is niet eenvoudig maar zeker niet onmogelijk. In het artikel hieronder vertellen we je er alles over en laten we je stap voor stap zien hoe je er voor kan zorgen dat je een Responsive YouTube video op je WordPress website krijgt.

Soms zien we Youtube video’s op websites die er op de desktop versie van die website prima uitzien maar op de tablet of mobiele versie van de website van de pagina lopen.

Wij hebben dat opgelost door een tip te gebruiken van de website coolestguidesontheplanet.com.

De tip is om deze code toe te voegen aan je website in het CSS:

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

De embeded code van de YouTube video zet je in een div met de class “videoContainer” en hierdoor wordt je video responsive.

Zo zou de code er dan uit moeten komen te zien:
<div class=”video-container”>
<iframe src=”https://www.youtube.com/embed/vaf13ZhmFb8?rel=0″ frameborder=”0″ allowfullscreen=””></iframe>
</div>

Let op om het goed te laten werken op deze website moest ik wel de breedte en hoogte uit de iframe verwijderen dus:

<iframe width=”640″ height=”352″ src=”https://www.youtube.com/embed/vaf13ZhmFb8?rel=0″ frameborder=”0″ allowfullscreen=””></iframe>

heb ik aangepast in

<iframe src=”https://www.youtube.com/embed/vaf13ZhmFb8?rel=0″ frameborder=”0″ allowfullscreen=””></iframe>

Als ik de afmetingen in de iframe liet staan schaalde de video niet goed op schermen smaller dan 768 pixels.

De code heb ik als code onder dit bericht gezet. Als je het scherm van je browser kleiner maakt of gebruik maakt van de ontwikkelaarstools van je browser en de verschillende responsive opties bekijkt zul je zien dat de video op elk scherm binnen het thema blijft.

Komt je er niet uit? Wij helpen je graag en snel!
Heb je nog vragen over YouTube video’s mee laten schalen met je responsive website of andere WordPress vragen? Dan kun je ons elke werkdag bellen van 09:00 uur tot 18:00 of 24/7 mailen naar helpdesk@wphdnl.com. Wij helpen je graag en snel met je WordPress website. Lees voor je contact met ons opneemt eerst onze Algemene Voorwaarden.