Videos für responsive Webdesigns einbetten

Videos für responsive Webdesigns einbetten

Da die Nachfrage an mobilfähigen Webseiten immer größer wird, haben 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="http://www.youtube.com/embed/kh29_SERH0Y" frameborder="0" allowfullscreen></iframe>
</div>

Laravel Bootstrap Components

NEW Laravel Bootstrap Components absofort verfügbar

Laravel Bootstrap Components ist ein Starter-Kit für Laravel mit Blade und Bootstrap speziell entwickelt für Entwickler.

META
Kategorie:
Allgemein
Datum:
07. August 2018
Impressum

© 2019 Zundel-Webdesign - Alle Rechte vorbehalten.
Die als Artikel veröffentlichten Inhalte unterliegen dieser Creative Commons Licence.