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.

Innerhalb einer responsiven Webseite soll 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 das Menü einmal groß und einmal angepasst klein angezeigt – und die Seitenleiste wird auf dem Mobilgerät unter dem Hauptinhalt der Webseite angezeigt.

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


Beispiel aus der Praxis OHNE responsive Design

Zwei konkrete Beispiele:
a)
Wird ein Textbereich auf einer herkömmlichen Webseite OHNE responsive Design in der Breite verändert, passt sich die Textlänge dieser Breite automatisch an. Natürlich bleibt der Text inhaltlich der selbe und auch die Buchstabengröße bleibt unverändert. Aber wird der Textbereich schmaler, können weniger Worte je Textzeile dargestellt werden, und somit wird 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 anpassen.
b)
Wird ein eingefügtes Foto 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.

Textbereiche und Fotos verhalten sich somit entgegengesetzt.


Videoplayer Breite und Höhe
Beim Videoplayer verhält sich der BEDARF wie bei einem Foto. Der HTML-Standard wird ihn 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 jedoch einen Unterschied zu Fotos im Browser. Denn bei Fotos "weiß" der Browser automatisch das passende Seitenverhältnis.
Das korrekte Seitenverhältnis kennt der Browser bei einem Videoplayer jedoch nicht. Zudem kann dieses mal 16:9 und ein anderes mal z.B. 4:3 betragen. Und der Player kann dies im iFrame der Webseite nicht mitteilen. Der Player hat keinen Einfluss darauf, welche Einstellungen Ihre Webseite vorgibt.

Herkömmlich wird das korrekte Seitenverhältnis daher im Browser fest eingestellt. Eine exakte Breite und Höhe.
Diese passt sich jedoch NICHT responsive an!

Daher muss auf responsiven Seiten die Playerbreite und Höhe per CSS eingestellt werden. Siehe nächster Abschnitt. Sie können natürlich auch eigene Anpassungen z.B. per Javascript verwenden.

CSS-Code für unseren iFrame Player:

Die Voraussetzung ist eine bereits responsive Webseite.

Sie fügen den Videoplayer an einer Position ein (z.B. in einen DIV-Container), die sich der Breite der Webseite automatisch anpasst. So wie die Textspalte von Ihrem Hauptinhalt. Wenn sich Ihre Webseite nicht anpasst, kann auch der Player nicht auf das Layout und die Breite reagieren und sich somit auch nicht anpassen.

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 Anpassung des iFrame:

<iframe width="640" height="360" style="border: none" 
allowfullscreen src="https://www.blitzvideoserver.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" allowfullscreen 
src="https://www.blitzvideoserver.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