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

support
Dutch English French German

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