Sonntag, 30. August 2015

Flexible Youtube-Videos für Mobilgeräte

Mir fiel auf, dass viele Youtube-Videos eingebettet haben.
Entweder in der Sidebar ober im Post selber.
Oft ragen diese Videoboxen aus den Elemente oder gar der Seite hinaus.

Wenn wir ein Video von Youtube einbetten bekommen wir folgendes von Youtube:
<iframe width="420" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw" frameborder="0" allowfullscreen></iframe>

Youtube gibt mir eine feste Breite und Höhe vor, die ich dann manuell verändern muss, falls sie mich nicht anspricht.

Das ist natürlich der Tod für einige mobile Geräte, da die Videos einfach diese Breite beibehalten.

Damit die Videos flexibel/responsive werden, benötige ich lediglich etwas CSS und eine etwas veränderte HTML-Eingabe.

Zur CSS (für meine Zwecke etwas angepasst):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 10px;
border: 1px solid silver;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
border: 0
}

Zur HTML:
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>

Wir sehen jetzt, dass die Box sich nicht um die Angaben kümmert, sondern sich der Breite anpasst.

Ich habe den iframe noch etwas hinzugefügt, dass ich unten rot hervorhebe:
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>

Das bewirkt,dass am Ende keine Videovorschläge von Youtube erscheinen.
Ich mag das nicht.
Wenn Ihr das möchtet, dann ?rel=0 einfach weglassen.

Wenn Ihr jetzt auf der ganz sicheren Seite sein wollt, würde ich noch einen div drum herum einbauen.
Damit könnt Ihr später das ganze nachtäglich noch verändern, falls Ihr Euch umentscheidet.
Wir fügen also noch eine Box ein.
Diese nennen wir beispielsweise video-box (Ihr könnt die nennen wie Ihr wollt.

Unsere HTML sehe dann so aus:
<div class="video-box">
<div class="video-container">
<iframe allowfullscreen="" height="315" src="https://www.youtube.com/embed/zfOGYckuHsw?rel=0" width="420"></iframe>
</div>
</div>

In unserer CSS tragen wir die box auch ein. Erstmal ohne Werte:
.video-box {}

Wofür der ganze Stress?
Beispiel:
Ihr habt das Video wie beschrieben auf volle Breite gesetzt.
Jetzt entscheidet Ihr Euch, der soll nur 300px beit sein.
Dann geht ihr einfach in die CSS und verändert den Wert:
.video-box {width:300px}

Ein Eintrag genügt um dieses Ergebnis zu erzielen

Man kann außerdem noch eine ganze Menge Spielerein mit diesen beiden Boxen anstellen.
Effekte wie Schatten,Rahmen,Hintergründe, Ladezeichen hinter der Box und weiß der Geier was noch.

Bis............


Nachtrag

Für die jenigen die lieber mit Javascript arbeiten möchten

Das teilte mir Oliver Doetsch mit
(einfach hier hinein kopiert):

Eine sehr schöne Lösung von +Myriam Kreatief
<script>
    (function() {
        HTMLElement.prototype.wrap = function(elms) {
            if (!elms.length) elms = [elms];
            for (var i = elms.length - 1; i >= 0; i--) {
                var child = (i > 0) ? this.cloneNode(true) : this;
                var el = elms[i];

                var parent = el.parentNode;
                var sibling = el.nextSibling;

                child.appendChild(el);

                if (sibling) {
                    parent.insertBefore(child, sibling);
                } else {
                    parent.appendChild(child);
                }
            }
        };

        var iframe = document.querySelector('iframe[src*="youtube"]'),
            css = iframe.style;

        css.width = '100%';
        css.height = '100%';
        css.position = 'absolute';
        css.top = '0';
        css.left = '0';

        var div = document.createElement('div'),
            css = div.style;

        div.wrap(iframe);

        css.position = 'relative';
        css.width = '100%';
        css.height = '0';
        css.padding = '56.25% 0 0 0';
        css.display = 'block';
    })();
</script>