Skip to main content

Responsive Player

Ein "responsives Design" erlaubt die automatische Anpassung der Größe einer Webseite.
Beispielsweise passt sich die Breite von Textspalten und die Position und Formatierung des Menüs an den verfügbaren Platz an. Beispielsweise soll die selbe Webseite auf einem Mobilgerät (mit wenig Platz auf dem Bildschirm), als auch auf einem PC mit großem Monitor und Browserfenster optimal angezeigt werden.

Durch ein "responsive" reagierendes Layout passen sich die verschiedenen Bausteine der Seite dynamisch an kleinere und größere Platzverhältnisse an. Beispielsweise wird das Menü einmal groß und einmal klein angezeigt. Innerhalb einer responsiven Webseite soll sich auch der Videoplayer an den verfügbaren Platz anpassen.

Technisch gesehen wird die Darstellung per CSS (und ggf. Javascript) dynamisch angepasst.
Hinweis: Ihre Webseite muss bereits responsive sein, wenn sich der Player in Ihrem Layout responsive verhalten soll.


Allgemeine Grundlagen für eine responsive Größenanpassung

a) Wird ein Textinhalt z.B. in einem DIV-Container auf einer herkömmlichen Webseite in der Breite verändert, passt sich die Testdarstellung dieser Breite automatisch an. Natürlich bleibt der Text inhaltlich der selbe und auch die Buchstabengröße bleibt unverändert. Wird der Textbereich jedoch schmaler, können weniger Worte je Zeile dargestellt werden, und somit wird sich der Platzbedarf des Text nach unten länger! Wird der Textbereich breiter, passen mehr Worte in jede Zeile, es werden weniger Zeilen benötigt und somit nimmt die Höhe des Textbereich ab. Technisch: ein umliegender DIV-Container wird sich entsprechend in der Höhe anpassen und die darunter folgenden Inhalte werden verschoben.

b) Wird nicht ein Text, sondern ein Foto eingefügt und in der Breite verändert, wird es ebenfalls automatisch angepasst - jedoch anders als Text! Wird die Anzeigebreite des Fotos schmaler eingestellt, wird dieses in der Anzeigehöhe nicht höher, sondern kleiner! Dies ist wichtig damit das Foto nicht verzerrt. Technisch: ein umliegender DIV-Container würde sich entsprechend anpassen.

Beim Verändern der Breite verhalten sich daher Textinhalte und Fotos entgegengesetzt.


Wie verhält sich die Breite und Höhe eines Videoplayer?
Beim Videoplayer erwarten wir optisch das selbe Verhalten wie bei einem Foto. Ein Video soll nicht verzerren und sich somit im selben Seitenverhältnis in der Größe anpassen.
Der HTML-Standard wird ein Video jedoch anders behandeln! Wird die Breite angepasst, bleibt die Höhe unverändert. Wird die Höhe angepasst, wird hierdurch die Breite nicht beeinflusst. Würde der Player z.B. breiter, aber die Höhe unverändert bleiben, dann wäre entweder das Videobild verzerrt oder es würden vom Videoplayer schwarze Balken eingefügt (der nicht verwendete Platz wird mit schwarz aufgefüllt).

Diese automatische Anpassung der Höhe hat im Browser einen wesentlichen Unterschied zu Fotos: bei Fotos "kennt" der Browser das passende Seitenverhältnis (aus der Fotodatei ausgelesen)! Dies ist bei Videos nicht der Fall!
Der Player weiß dies intern, aber nicht der Browser bei der Größenvorgabe für das iFrame. Der Player hat keinen Einfluss darauf, welche Einstellungen Ihre Webseite vorgibt. Der Player kann nur den verfügbaren Platz ausfüllen.

Das korrekte Seitenverhältnis wäre meistens 16:9 – aber könnte je nach Datei, Videokamera oder Videoschnitt genauso 4:3, 9:16 (Hochformat) oder komplett anders ausfallen. Dieses Seitenverhältnis wird dem Videoplayer im HTML-Code (iFrame) von Ihrer Webseite vorgegeben. 

Wie wird die Größe / Seitenverhältnis angegeben?

  • Herkömmlich OHNE responsive Design wird Größe eines Videoplayers im Browser auf eine feste Breite und Höhe eingestellt. Beispielsweise 960px breit und 540px hoch. Ohne automatische Anpassung.
  • Für eine dynamische Größenanpassung (responsive) im korrekten Seitenverhältnis muss die Playerbreite und Höhe per CSS (oder JavaScript) eingestellt werden. Die Breite wird dann von Ihrer Webseite je nach Browserfenster skaliert und das iFrame bleibt automatisch im korrekten Seitenverhältnis.

 

CSS-Code für den iFrame Player:

Sie fügen den Videoplayer an einer belieben Position auf Ihrer Webseite ein (z.B. in einen DIV-Container). 

Der Player besteht aus einem HTML-konformen iFrame. Sie können dieses iFrame wie jedes andere HTML-Element so anpassen wie Sie es benötigen. Der Player wird sich innerhalb des iFrame immer der von Ihnen gesteckten Breite und Höhe zu 100% anpassen. Der Player kann jedoch von sich aus keinen Einfluss auf die umliegende Webseite nehmen.

Vor der responsiven Anpassung des iFrame hat dieser eine feste Höhe und Breite:

<iframe width="640" height="360" style="border: none" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player.html?serverip=62.113.210.1&serverapp=ihrAccount-live&streamname=livestream"></iframe>


Anpassungen:

  • Stellen Sie bitte die Breite und Höhe des Players auf hundert Prozent: width="100%" height="100%"
  • Ergänzen Sie eine CSS-Klasse: "videoiframe"
  • Um diesen iFrame-Code herum ergänzen Sie einen DIV-Container mit der CSS-Klasse "videodiv"

So sollte der Player nun aussehen:

<div class="videodiv">
<iframe class="videoiframe" width="100%" height="100%" style="border: none" referrerpolicy="strict-origin" allowfullscreen src="https://start.video-stream-hosting.de/player.html?serverip=62.113.210.1&serverapp=ihrAccount-live&streamname=livestream"></iframe>
</div>

Hinzu kommt die Größensteuerung per CSS:

.videodiv {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 0px;
 height: 0;
}

.videoiframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Wenn Ihnen Stichwörter wie "CSS" nichts sagen, hilft unser Support gerne weiter. Wichtig ist jedoch, dass Ihre Webseite bereits 'responsive' auf Größenveränderungen reagiert. Ist dies nicht der Fall, kann der Player sich auch nicht anders verhalten.

Back to top