Responsive Player für Mobilgeräte

Ein „responsives Design“ erlaubt die automatische Anpassung der Größe einer Webseite. Innerhalb einer responsiven Webseite soll sich auch der Videoplayer an den verfügbaren Platz anpassen.

CSS-Code für den Player

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.

Wie funktioniert „responsive“

Wie verhält sich TEXT und ein Foto „responsive“?

  • Wird ein Textbereich auf einer Webseite in der Breite verändert, bleib der Text natürlich inhaltlich der selbe und auch die Buchstabengröße bleibt unverändert. Aber wird der Textbereich schmaler, können weniger Worte je Textzeile dargestellt werden, Wörter werden einfach in die nächste Zeile verschoben 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.

 

  • Wird ein Foto in der Breite verändert, wird es ebenfalls automatisch angepasst – jedoch anders als Text!
    Wird die Anzeigebreite des Fotos schmaler, wird dieses auch in der Anzeigehöhe kleiner! Dies ist wichtig damit das Foto nicht verzerrt.
  • Textbereiche und Fotos verhalten sich somit entgegengesetzt. Ein Text wird bei weniger Breite länger, Fotos werden bei weniger Breite kleiner.

Videoplayer responsive

Bei einem Video und dessen Player ist der Bedarf der selbe wie bei einem Foto. Wird die Videobreite geringer, muss auch die Höhe geringer werden.
HTML wird aber von Haus aus bei geringerer Breite das Video bzw. dessen Player in der selben Höhe belassen. Die Höhe bleibt unverändert.

Entweder das Videobild wird daher verzerrt (das sollte auf keinen Fall passieren!) oder der Player wird im vorhandenen Platz das Video mittig ohne Verzerrung anzeigen. Das Video wird also kleiner sein als der verfügbare Platz von der Webseite. Der überschüssige Patz wird mit schwarzen Balken ausgefüllt.

Die Antwort hierauf lautet: die Webseite wird „responsive“ erstellt. Alle Elemente passen sich der vorhandenen Platzverhältnissen an. Hierüber wird auch der Videoplayer immer im korrekten Seitenverhältnis von z.B. 16:9 angezeigt und kein Platz für schwarze Ränder verschenkt.

Steinmann » Video Stream Hosting

Event-Dienstleister mit teilweise 100 erfolgreichen gemeinsamen Projekten verlassen sich auf uns:
Wir stehen Ihnen zur Seite! Wir haben viel Erfahrung, helfen wenn es brennt und gehen die Extra-Meile für Ihren Erfolg!

Streaming-Pakete mit Profi-Support