alugha Videoplayer respsonsive

Um dies zu vermeiden, haben wir unseren alugha Video Player so ausgestattet, dass er auf CSS Werte anspricht. Hierzu kann man in seiner CSS Datei (bei Wordpress ist es im Theme-Ordner und im styles.css) folgende Werte hinzufügen:

Read this article in: Deutsch, English

Estimated reading time:0minutes
.flex-video { position: relative; padding-top: 25px; padding-bottom: 67.5%; height: 0; margin-bottom: 16px; overflow: hidden; }

Um dann auch noch sicherzustellen, dass das Video auch auf Displays mit einer 16:9 Ratio gut aussieht, fügt man diese Werte ebenso noch in seine CSS Datei hinzu:

.flex-video.widescreen { padding-bottom: 57.25%; }

Last but not least muss nun noch sichergestellt werden, dass das Video sich auch an die Größe des Browserfensters anpasst wenn eben diese verändert wird:

.flex-video iframe, .flex-video object, .flex-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Um nun das Video einzubinden geht man wie folgt vor:

<div class="flex-video widescreen"> <iframe src="https://alugha.com/embed/yt/?v=mbOEknbi4gQ" allowfullscreen="" frameborder="0"></iframe> </div>

Mehr braucht man gar nicht und schon passt sich die Größe des Videos immer der Fenstergröße im Browser an.

CommentsInsightsShare

More articles by this producer

Der Mensch, das Sprachtalent

Der Mensch verfügt über eine einmalige Fähigkeit, die er im Austausch mit anderen zur vollen Entfaltung bringt: Die Sprache. Ihre soziale Dimension lässt sogar Klatsch und Tratsch in einem anderen Licht erscheinen.

Videos by this producer

Archos CEO

Das Jahr 2020 war aufgrund der Covid-19-Krise besonders schwierig, jedoch hat unser Team eine enorme Belastbarkeit gezeigt und Archos will 2021 mit neuen Innovationen und einem verbesserten Geschäftsmodell überraschen. Wir werden unsere Aktionäre Anfang des 2. Quartals 2021 zu einer Vorstellung unse