Sonntag, 30. August 2015

Flexible Youtube-Videos für Mobilgeräte

Da ich nicht lange Blogge, hab ich mal ein Streifzug durch die Bloggemeinschaft gemacht.
Einiges war wirklich beeindruckend schön designt und mit viel Liebe zum Detail.

Was mir auffiel ist, 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.

Geht mal auf diese Seite und zieht das Browserfenster seitlich kleiner.
Ihr werdet sehen, dass das Video sich der Breite automatisch anpasst.

Ich habe folgenden Code vor Jahren von einen professionellen Designer erhalten.
Wollen wir uns hier nicht mit fremden Federn schmücken.

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.Von mir aus Banane)

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.
Sollte ich Zeit haben und es besteht Interesse, werde ich noch einen Beitrag dazu schreiben.
Aber vorab könnt Ihr hier ein paar Spielereien sehen.

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>

Kommentare:

  1. Hallo TupamaroDesign,

    Dein Code sieht sehr gut aus! Allerdings verstehe ich nicht wo ich bei Blogger den div-Container hinlege?
    Könntest Du mir dies bitte auch noch erklären?

    Ich habe bisher immer mit dem untenstehenden Code meine Videos responsive gemacht (in meinem Shop funktioniert diese Variante sehr gut - auf dem Smartphone mit Blogger auch):

    Leider darf ich hier den Code nicht posten - deshalb etwas verstümmelt - ohne Klammern:
    (Klammer<) div class="col-xs-6 col-sm-8 col-md-10 col-lg-12" (hier gehören die Klammern hin ><) iframe src="https://www.patin-a.de//player.vimeo.com/video/100910671?title=0&byline=0" width="100%" height="350px" frameborder="0" allowfullscreen="allowfullscreen" (hier gehören die Klammern hin><) /iframe (hier gehören die Klammern hin ><) /div (>Klammer)

    vielen Dank im Voraus -

    Gruss - Jürgen

    AntwortenLöschen
    Antworten
    1. hi Jürgen. ui.da wird man ja blind :)
      das ist ja ein vimeo und kein youtube video.
      vimeo videos kannst du ganz cool mit dem hauseigenen object tag einbinden und sie sind automatisch responsive.zumindest auf einer homepage.
      weisst du wie das geht?
      allerdings weiss ich nicht ob das für blogger auch zutrifft.
      müsste ich selber mal schauen,da ich nie vimeo videos benutze.

      Löschen
    2. teste mal.ob das auf mobil responsive genug ist, bevor ich da irgendein blödsinn erzähle.
      http://blogschande.blogspot.de/p/testseite.html

      Löschen