Responsive Design - Videos embedden

Letztens bin ich über das Problem gestolpert wie ich ein YouTube Video so in meine Seite einbauen kann dass es schön mit der Webseite skaliert und auch auf Smartphones gut aussieht. Bei meiner Suche im Web bin ich auf folgende Lösung von Anders M. Andersen gestossen:

Im Stylesheet

Der Style für das DIV um den embed code:

.embed-container {
    position: relative;
    padding-bottom: 46.25%; /* 16/9 ratio */
    
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

Der Style für den YouTube iframe selbst (funktioniert auch mit per embed oder object eingebettete Videos, z.B. Vimeo).

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

Im HTML Code der Seite


<div class="embed-container">

<iframe src="http://www.youtube.com/embed/sJWeG5TL14Q" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>

</div>

Weitere Infos

Für weitere Infos lest euch am besten den Originalpost von Anders M. Andersen durch.
Ein Beispiel dieses Codes könnt ihr auch auf meiner Seite anschauen.

Labels: , , , ,