Responsive Player für Mobilgeräte

Technische Beschreibung für Interessierte: Der Player besteht aus einem iFrame. Sie bestimmen die Größe und Position auf Ihrer Webseite.
Der Player wird sich innerhalb des iFrame der von Ihnen vorgegebenen Breite und Höhe anpassen und das Video in der maximalen verfügbaren Größe anzeigen – das Video dabei aber nicht verzerren.

Vor der Anpassung des iFrame
<iframe width=“640″ height=“360″ style=“border: none“ x-webkit-airplay=“allow“ referrerpolicy=“strict-origin“ allowfullscreen src=“https://start.video-stream-hosting.de//player.html?serverapp=ihrAccount-live&streamname=livestream.smil“></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“ x-webkit-airplay=“allow“ referrerpolicy=“strict-origin“ allowfullscreen src=“https://start.video-stream-hosting.de//player.html?serverapp=ihrAccount-live&streamname=livestream.smil“></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.