Rendre le embed YouTube responsive

Si vous avez déjà développé un site en responsive design, vous avez peut-être remarqué que les embed youtube, vimeo, dailymotion… ne se redimensionne pas.

Voici la solution, pour avoir un object, iframe et embed elastic :

[pastacode lang= »css » message= » » highlight= » » provider= »manual »]

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

[/pastacode]

Si vous avez besoin d’une taille fixe et elastic ajouté :

.video-wrapper {
	width: 600px;
	max-width: 100%;
}


Laisser un commentaire

*Champs obligatoires

c1be80d0ab28efb2d748467288cdc495fffffff