Responsive Player

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

Beispielsweise wird die selbe Webseite an Mobilgeräte mit wenig Platz auf dem Bildschirm, als auch identisch an PCs mit FullHD bis 5K Auflösung ausgeliefert. Der HTML-Code und die Seiteninhalte sollen identisch sein. Auf einer "responsive" reagierenden Webseite passen sich die verschiedenen Bausteine der Seite dynamisch an kleinere und größere Platzverhältnisse an. 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.

Wichtig für das Verständnis sind diese zwei Beispiele:
a) Wird der Text auf Ihrer Webseite in der Breite verändert, wird dieser sich automatisch anpassen. Wird der Platz schmaler, wird der Platzbedarf des Text nach unten länger! Ein umliegender DIV-Container würde schmaler und hierdurch gleichzeitig automatisch höher.
b) Wird ein eingefügtes Foto in der Breite verändert, wird es ebenfalls automatisch angepasst - jedoch anders! Wird der Platz des Fotos schmaler, wird es in der Höhe nicht größer, sondern kleiner. Dies ist wichtig damit das Foto noch natürlich aussieht, und nicht verzerrt. Ein umliegender DIV-Container würde somit schmaler und hierdurch in der Höhe automatisch kleiner.

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 höher, dann wäre entweder das Bild verzerrt, oder es würden vom Player schwarze Balken eingefügt für den Platz den er nicht verwenden kann.
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. Er weiß wie die Höhe angepasst werden muss, damit das Bild noch richtig aussieht nachdem die Breite angepasst wurde. 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.

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%;
}

CSS-Code für unseren Player-HTML-Code (embed-code)

Wenn Sie einen aktuellen Player-Code von uns verwenden, ist bereits alles für Ihr responsives Layout vorbereitet. Sie müssen nur noch diesen CSS-Code in Ihre Seite einfügen:

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

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

Sollte Ihr Player schon älter sein, senden wir Ihnen gerne einen aktuellen Playercode zu. 

Ein anderes Seitenverhältnis

Im CSS oben wird jeweils 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%.

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 somit im CSS-Code für padding-bottom 75% ein.