Videos für responsive Webdesigns einbetten

Videos für responsive Webdesigns einbetten

Da die Nachfrage an mobilfähigen Webseiten immer größer wird, habe ich mich gefragt, wie man besten eingebettete Videos von YouTube, Vimeo usw. an responsive Layouts optimiert:

Daraufhin habe ich ein paar Tricks ausprobiert und recherchierte etwas im weiten Web. Darfhin bin ich zu dem Entschluss gekommen, dass die Varianten von den Kollegen Elmastudio.de (CSS-Tipp: Eingebettete Videos für responsive Webdesigns optimieren) oder auch webdesignerwall.com (CSS: Elastic Videos) die Besten sind.

Der Folgende CSS-Code wird unten im Videobeispiel verwendet:

CSS-Code:

.responsive-video {
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
    display: block;
    height: 0;
}
        

.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
        

Nun noch das Markup des Videobeispiels:

HTML-Code:

<div class="responsive-video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/kh29_SERH0Y" frameborder="0" allowfullscreen></iframe>
</div>