Kategorier
CSS HTML

Responsiv video embed

Embedded video fra Youtube eller Vimeo er som udgangspunkt ikke responsivt, men har en fast størrelse. Nedenstående gør at videoen tilpasser sig den container den ligger i.

HTML:



<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>


CSS

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *