Vimeo of Youtube video responsive maken met CSS 💥

Bijgewerkt: 4 November 2024 | door: Martijn Assie, maakt al 20 jaar websites en winkels, tevens Linux-, Wordpress-,
Photoshop- en SEO-expert. | DE EN

Vimeo en Youtube video responsive maken

Men kan dit probleem zowel met CSS als met Javascript oplossen. Met CSS is een stuk makkelijker, dus dat is hoe we het gaan doen. Vimeo of Youtube maakt geen verschil, u kunt dit op alle video's toepassen.

Video responsive maken met CSS

Om te beginnen haalt u de Vimeo of Youtube iframe embed code op op de pagina van de Vimeo/Youtube video en plaatst deze op uw site. U maakt er een div omheen op zo’n manier dat het eruit komt te zien zoals u hieronder ziet staan.

<div class="video-container"><iframe>.................</iframe></div>

Hoogte en breedte kunt u uit de Youtube code verwijderen als u dat wilt, maar u kunt het ook gewoon laten staan. Aan uw css voegt u het volgende toe:

.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%;
}

Het bovenste gedeelte richt zich op de video container en het onderste gedeelte op wat er zich in de container bevindt. In dit geval is het de iframe maar u kunt deze code ook gebruik met objects en embed elementen.

Meer werk is er niet te doen. U ziet, een Youtube of Vimeo video responsive maken is met CSS zo gebeurd. Uw video wordt nu perfect weergegeven in alle browsers op PC, laptop, tablet en mobiel.