Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!

Responsive Videos ohne Plugin einfach per CSS

In der heutigen Zeit, wo die meisten Themes responsive sind, gibt es immer wieder das Problem, dass die Videos von Seiten wie YouTube oder Vimeo eben nicht für mobile Endgeräte optimiert sind. Hierfür gibt es zwar einiges Plugins, aber wie so oft sind diese to much, denn es geht auch einfacher.

Zunächst musst du folgenden CSS Code in deiner style.css ablegen:

.videowrapper { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; }
.videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Wenn du nun z.B. ein YouTube Video in deinen Beitrag einfügst, musst du im Text-Editor lediglich den folgenden div-Container um dieses Video legen:

<div class="videowrapper">

</div>

… und das Video dazwischen rein setzen. Am Ende sieht es dann so aus:

<div class="videowrapper">
	<iframe width="718" height="404" src="//www.youtube.com/embed/YbdeZ14q6ek?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Das war’s auch schon. Um dir das Ganze noch zu demonstrieren, habe ich den o.g. Code hier eingefügt. Durch das kleiner ziehen deines Browser, wirst du den Effekt sehen. Tipp: Benutze im Firefox die Tastenkombination STRG+SHIFT+M um eine Responsive Ansicht zu erhalten.

Über André

Als Web- und Grafikdesigner arbeite ich täglich mit WordPress. Auf DRWP.de veröffentliche ich in unregelmäßigen Abständen immer wieder kleinere Snippets und Artikel, die mir bei meiner täglichen Arbeit helfen und auch für den ein oder anderen Suchenden von nicht unerheblichem Interesse sein könnten.

WordPress Affiliate ThemeAnzeige

2 Kommentare

Avatar von Wulf

Wulf 18. August 2014 um 13:06

Das werde ich mir mal nachher genauer ansehen müssen. Hatte schon vor Ewigkeiten verzweifelt zu dem Thema gegoogelt und mir schlussendlich auch so einen videowrapper gebastelt, doch habe ich immer wieder das Problem gehabt, dass das Video zwar ordnungsgemäß und wie gewünscht verkleinert wurde, jedoch nur in punkto width, nicht height, von daher wird das eine willkommene Optimierung für mein(e) Blog(s) sein, denn das es funktionieren wird, kann ich ja schon am Beispiel sehen ;-) Von daher Danke dafür!

Noch ein kurzer hinweis zu dem Youtube-iframe-Snippet: Da der W3C-Validator bei frameborder immer meckert, lösche ich das jedes Mal – genauso wie allowfullscreen – raus, zumal es keinen Unterschied in der Darstellung und Funktion des eingebetteten Videos macht (es sei denn natürlich du sagst mir jetzt, dass es daran liegt, dass das bei mir mit der height-Anpassung nicht funktioniert)

Antworten
Avatar von André

André 12. September 2014 um 17:27

Danke für den Hinweis. Speziell bei so Sachen achten wir nur sehr selten auf eine Validierung. Ich denke die beiden Optionen haben mit deinem Problem auch nichts zu tun. Ich habe mir vor einiger Zeit auch sehr viele Snippets angeschaut und die meisten hatten einfach das Height/Width Problem.

Antworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*