Responsive Player

"Responsiv" ist eine Beschreibung wie sich die Größe von Objekten auf einer Webseite verhalten soll.

Beispielsweise soll die selbe Webseite auf einem Mobilgerät mit wenig Platz auf dem Bildschirm, als auch auf einem PC mit großem Monitor optimal angezeigt werden. Der HTML-Code und die Seiteninhalte sind auf beiden Geräten die selben! Durch ein "responsiv" reagierendes Webseitenlayout 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.


Beim Verständnis helfen diese zwei konkreten Beispiele:

a) Wird ein Textbereich auf einer herkömmlichen Webseite 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, und die die Höhe des Textbereich nimmt 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! Wird die Anzeigebreite des Fotos schmaler eingestellt, wird es 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.

Videoplayer Breite und Höhe
Beim Videoplayer verhält es sich wie bei einem Foto/Bild. Wird die Breite kleiner, muss auch die Höhe kleiner werden. Würde der Player breiter, aber die Höhe unverändert bleiben oder sogar erhöht, dann wäre entweder das Bild verzerrt, oder es würden vom Player 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. Wird die Höhe oder Breite eines Fotos angepasst, wird der Browser passend das Seitenverhältnis anpassen. Das korrekte Seitenverhältnis kennt der Browser bei einem Videoplayer jedoch nicht. Der Videoinhalt ist in der Regel 16:9, ein anderes mal jedoch 4:3 oder in einer Bannerwerbung auch 10:1.

Das korrekte Seitenverhältnis wird dem Browser daher per CSS beigebracht. Hierfür verwenden wird das CSS aus dem nächsten Abschnitt.

CSS-Code für unseren iFrame Player

Die Voraussetzung ist eine bereits responsive reagierende Webseite. Sie fügen den Videoplayer an einer Position ein (z.B. in einen DIV-Container), die sich der Breite der Webseite automatisch anpasst. Wenn sich Ihre Webseite nicht anpasst, kann auch der Player nicht auf das Layout und die Breite reagieren und sich somit auch nicht anpassen.


Ihr iFrame sieht bisher beispielsweise so aus:
<iframe width="640" height="360" style="border: none" allowfullscreen src="http://www.blitzvideoserver.de/player.html?serverip=62.113.210.1&amp;serverapp=ihrAccount-live&amp;live=1&amp;autostart=1&amp;stream720p=livestream"></iframe>

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

<div class="videodiv">
<iframe class="videoiframe" width="100%" height="100%" style="border: none" allowfullscreen src="http://www.blitzvideoserver.de/player.html?serverip=62.113.210.1&amp;serverapp=ihrAccount-live&amp;live=1&amp;autostart=1&amp;stream720p=livestream"></iframe>
</div>

Bitte folgenden CSS-Code in Ihre Seite einfügen:

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

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

Ein anderes Seitenverhältnis

Im CSS oben wird davon ausgegangen, dass Sie ein Video mit dem Seitenverhältnis 16:9 verwenden. Dieses Seitenverhältnis in Prozent (der Höhe gegenüber der Breite) entspricht 56,25%. Dieser Wert ist eingestellt.

Sie kommen auf diesen Prozentwert mit der Berechnung von: 100 geteilt durch 16 mal 9 = 56,25

Für das passende Seitenverhältnis von einem 4:3 Video rechnen Sie: 100 / 4 * 3 = 75
Sie tragen in diesem Fall im CSS-Code für padding-bottom: 75% ein.