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>
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>
