Video Responsive
Die Skalierung von Videos die per iFrame eingebunden werden lässt doch sehr zu wünschen übrig.
Auf der Suche bin ich auf diese Seite gestoßen und möchte euch diese Lösung nicht vorenthalten.
Das erste Video wurde per Widget > Social Media > Youtube eingebunden, das zweite per CSS in einem responsiven DIV dargestellt.
Zum testen einfach das Browserfenster in der Breite verkleinern und das Verhalten der Skalierung beobachten.
Video per Widget > Social Media > Youtube eingebunden
Video per Widget > Quelltext im DIV
mobile_script einfügen:
Doppelklick auf die entsprechende Seite > Attribute > unten auf Attribute und den Haken bei (alle anzeigen setzen) > Standart > mobile_script > code einfügen > ok > ok
<style>
.elastic-video {
position: relative;
padding-bottom: 55%;
padding-top: 15px;
height: 0;
overflow: hidden;
}
.elastic-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
Quellcode einfügen:
neuer Artikel > Widget > Quellcode > code einfügen > ok
<div class="elastic-video"><iframe width="853"
height="480" src="https://www.youtube.com/embed/EKOWO9ip4R4?rel=0"
frameborder="0"
allowfullscreen></iframe></div>