Responsive Player für Mobilgeräte

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

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.

WICHTIG
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" 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.