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.

InnerhalbDurch einer responsiven Webseite sollein sich auch der Videoplayer an den verfügbaren Platz anpassen, der im responsive Design für ihn vorgegeben wird.

Durch ein "responsive" reagierendes Layout passen sich die verschiedenen Bausteine der Seite dynamisch an kleinere und größere Platzverhältnisse an. Beispielsweise wird wird das Menü einmal groß und einmal angepasst klein angezeigtangezeigt. –Innerhalb undeiner dieresponsiven SeitenleisteWebseite wirdsoll aufsich dem Mobilgerät unter dem Hauptinhaltauch der WebseiteVideoplayer angezeigt.an den verfügbaren Platz anpassen.

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

BeispielAllgemeine ausGrundlagen derfür Praxis OHNEeine responsive DesignGrößenanpassung

Zweia) konkrete Beispiele:
a)
Wird ein TextbereichTextinhalt  z.B. in einem DIV-Container auf einer einer herkömmlichen Webseite OHNE responsive Design in der Breite verändert, passt sich die TextlängeTestdarstellung  dieser Breite automatisch an. Natürlich bleibt der Text inhaltlich der selbe und auch die Buchstabengröße bleibt unverändert. AberWird wird der Textbereich Textbereich jedoch schmaler, können weniger Worte je TextzeileZeile dargestellt dargestellt werden, und somit wird 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 die Höhe he des Textbereich ab. Technisch: ein umliegender DIV-Container Container wird sich entsprechend anpassen.
b)
Wird ein eingefügtes Foto in der Breite 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 es ebenfalls automatisch angepasst - jedoch anders als Text!  Wird die Anzeigebreite Anzeigebreite des Fotos schmaler eingestellt, wird dieses in der Anzeigehöhe he nicht höher, sondern kleiner! Dies ist wichtig damit das Foto nicht verzerrt. Technisch: ein umliegender DIV-Container würde sich entsprechend anpassen.

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

VideoplayerWie verhält sich die Breite und Höhe eines Videoplayer?
Beim Videoplayer verhält sicherwarten derwir BEDARF 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 ihnein Video jedoch anders behandeln.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 jedochim Browser einen wesentlichen Unterschied zu Fotos im Browser. DennFotos: bei Fotos Fotos "weiß"kennt"  der Browser automatisch das passende Seitenverhältnis.
Das korrekte Seitenverhältnis kennt (aus der Fotodatei ausgelesen)! Dies ist bei Videos nicht der Fall!
Der Player weiß dies intern, aber nicht der Browser bei einem Videoplayer jedoch nicht. Zudem kann dieses mal 16:9 und ein anderes mal z.B. 4:3 betragen. Und der PlayerGrößenvorgabe kannfür diesdas imiFrame. iFrame der Webseite nicht mitteilen. Der Player hat keinen Einfluss darauf, welche Einstellungen Ihre Webseite vorgibt. Der Player kann nur den verfügbaren Platz ausfüllen.

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

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

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

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