Individuelle Webentwicklung

Nicht immer ist eine Standardsoftware ausreichend um individuelle Anforderungen gerecht zu werden, wir schaffen Lösungen

Informationen
Bild: Individuelle Webentwicklung

Videos für responsive Webdesigns einbetten

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

Daraufhin hab ich ein paar Tricks ausprobiert. Ich recherchierte etwas im weiten Web und bin 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="http://www.youtube.com/embed/kh29_SERH0Y" frameborder="0" allowfullscreen></iframe>
</div>

Videobeispiel: