Es ist nicht nötig, Plugins oder Erweiterungen für responsive Videos mit HTML5 auf der Website oder im CMS zu verwenden.
Gerade Anwender von Contentmanagement-Systemen wie WordPress, Joomla usw. haben anders als Betreiber einer herkömmlichen Website, die nicht mit einem CMS umgesetzt wurde, eine große Auswahl an Erweiterungen bzw. Plugins für die Einbindung von responsiven Videos mit optimaler Darstellung auf allen Geräten. Jedoch lassen sich Videos praktisch überall ganz einfach und ohne eventuell sogar kostenpflichtige Drittanbieter-Erweiterungen einbinden, sofern das moderne HTML5 genutzt wird. Im Netz kursieren viele Anleitungen, wie man das mit Videos von YouTube macht. Hier geht es jedoch darum, eigene Videos im persönlichen Webauftritt responsiv für Desktop, Smartphone, Tablet usw. zu veröffentlichen.
Videos für den eigenen Webauftritt nutzen
Längst sind Videos auf Webseiten ein häufiger Bestandteil. Auch wenn viele Seitenbesucher Inhalte in Form von bebilderten Texten noch immer bevorzugen, haben Videos ihre Berechtigung. Sie können unter Umständen persönlicher sein und je nach Thema Sachverhalte nachvollziehbarer darstellen. Suchmaschinen sehen Video-Inhalte mittlerweile auch ganz gerne. Eine schlechte Idee ist es also keinesfalls, Videos für den eigenen Webauftritt zu nutzen.
Videos sollten unbedingt responsiv eingebunden werden
Ebenso wie Bilder, sollten die Videos jedoch unbedingt responsiv eingebunden und abhängig von der Fenstergröße des Anwender-Browsers dargestellt werden. Zwar können Videos in der Regel vom Betrachter auf die maximale Ansicht gebracht werden, es wäre jedoch nicht gewinnbringend, wenn sie zunächst zu klein angezeigt werden oder die Seitenbreite überschreiten und dadurch abgeschnitten sind oder unschöne, horizontale Scroll-Leisten erzwingen. Dass eine responsive Darstellung praktisch aller Medien in der heutigen Zeit Pflicht sein sollte, ist sicher jedem klar. Wie man das mit eigenen Videos macht, ist oft nicht so klar, weil die meisten Anleitungen, die im Netz zu finden sind, sich auf YouTube-Videos oder Videos von Vimeo usw. beziehen.
Video-Content auf YouTube oder anderen Plattformen nicht immer vorteilhaft
Nun möchte aber nicht jeder ein YouTube-Star werden und seine Filme auf der US-Plattform hosten, was neben dem Vorteil des kostenlosen Speicherplatzes ja nicht nur positiv ist, auch was den Datenschutz betrifft. Wer nicht regelmäßig interessanten Video-Content veröffentlicht, wird auch auf YouTube oder anderen Plattformen nicht von großer Reichweite oder gar Werbeeinnahmen profitieren. Mitunter wird auch vorgeschrieben, was überhaupt veröffentlicht werden darf und nicht selten kann man als Ersteller von Videos da ganz anderer Meinung sein, als die Konzerne der großen Video-Plattformen, die offensichtlich ein Standardverhalten mit wenig Spielraum an den Tag legen, um nicht ständig zu hohe Strafen zu riskieren.
Hosten von Videos auf dem eigenen Webspace
Natürlich ist es toll, dass viele ihre Video-Inhalte auf YouTube & Co. für andere kostenlos zugänglich machen und hoffentlich bleibt das auch noch lange so, dennoch gibt es eben auch nachvollziehbare Gründe für das Hosten von Videos auf dem eigenen und heutzutage meist bezahlbaren Webspace oder Server, vielleicht auch mit kostenpflichtigem Zugang. Und glücklicherweise geht das auch ohne großes Fachwissen im Webdesign recht einfach, wobei man völlig ohne Drittanbieter-Software, dann jedoch nicht ganz ohne Code auskommt. Es hält sich aber in Grenzen und am Ende präsentiert man selbst produzierte und selbst gehostete Videos responsiv, mit optimierter Darstellung auf allen Geräten.
Video responsiv direkt in einem Beitrag veröffentlichen
Im Folgenden gehen wir davon aus, dass ein Video responsiv direkt in einem Beitrag veröffentlicht wird. Bei einem CMS könnte das natürlich auch ein Modul sein oder über ein Plugin realisiert werden, wobei es dann manchmal auf die Eigenheiten des Contentmanagement-Systems ankommt.
Früher noch deutlich schwieriger, ist es jetzt ganz leicht, einfach ein Video-Objekt mit HTML5 zu nutzen. In Verbindung mit ein paar CSS-Anweisungen wird die responsive Darstellung sichergestellt. Wer CSS nicht auslagern kann oder will und lieber zusammen mit HTML5 direkt in den Quellcode schreiben möchte, kann folgenden Code verwenden:
<div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;">
<video style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls="controls">
<source src="/images/videos/ahadesign-test.mp4" type="video/mp4" />
</video>
</div>
Einfach obigen Code kopieren, einfügen und die Videoquelle anpassen.
Der Wert für padding-bottom wird je nach Abmessungen des Videos angepasst. Die angegebenen 56,25% entsprechen einem Format von 16 zu 9. Ausrechnen lässt sich das ganz leicht, indem einfach 9 durch 16 dividiert wird. Heraus kommt 0,5625, was mit 100 multipliziert wird. Hat das Video beispielsweise die konkreten Abmessungen 1600 x 500 Pixel, kann ohne irgendwelche Kürzungen auch schnell 500 durch 1600 geteilt werden, um das Format in Prozent herauszufinden. Die resultierenden 0,3125 mit hundert multipliziert ergeben 31,25 Prozent, die dann für padding-bottom angegeben werden. Ein sehr einfaches Prinzip also. Die Angabe für padding-top ist für den Abstand der Video-Kontrollleiste zuständig, die ohne diese Definition in den Videoplayer hineinragen könnte. Das ist jedoch eher relevant bei der Einbettung des Players von YouTube und anderen Anbietern und kann bei selbst gehosteten Videos weggelassen werden.
Sollte der Editor in einem CMS für die Eingabe des Quellcodes verwendet werden, z. B. TinyMCE, können Videos oft über eine Medien-Schaltfläche eingefügt werden. Besser und fehlerfreier ist es in der Regel, direkt den Quellcode für das Video im Editor einzufügen. Aber egal, wie ein Video eingefügt wird, könnte es je nach System sein, dass automatisch eine Breite und Höhe eingetragen wird. Diese muss dann unbedingt geändert werden in width 100% und height 100%. Ansonsten wird nur noch der Speicherpfad zum Video angegeben und der Videotyp, der hier MP4 ist. Ein weiterer Video-Typ ist auch das Open Source Format OGG oder WebM. Für den im Quellcode gezeigten »Type« wird dann statt mp4 einfach ogg oder eben webm eingetragen.
CSS und HTML5 getrennt
Natürlich geht das auch eleganter. Sofern es möglich ist, empfiehlt sich die getrennte Angabe von HTML5 und CSS. Der HTML5-Code könnte so aussehen:
<div class="videoBox goldenerschnitt kontrollabstand-fuenfundzwanzig">
<video controls="controls" width="100%" height="100%">
<source src="/images/videos/ahadesign-test.mp4" type="video/mp4" />
Der verwendete Browser kann dieses Video nicht wiedergeben. Bitte einen aktuellen Browser verwenden.
</video>
</div>
In der ersten Zeile werden die Klassen videoBox, goldenerschnitt und kontrollabstand-fuenfundzwanzig verwendet, wobei der Kontrollabstand wie bereits erwähnt, für selbstgehostete Videos nicht relevant ist und einfach weggelassen werden kann. Die Klassen sind natürlich ebenso im weiter unten gezeigten CSS definiert, wie Innenabstände, Breite, Höhe usw. Die 100%-Angabe für Width und Height braucht nicht im CSS definiert werden, wenn ein CMS wie Joomla bzw. ein Editor wie TinyMCE usw. verwendet wird und dadurch die Breite und Höhe automatisch beim Zuweisen des Videos eingetragen wird und natürlich dann im Quellcode des Artikels ohnehin jedes mal auf 100 Prozent geändert werden muss. Unter dem Pfad und Videotyp, kann ein beliebiger Text angegeben werden, der Seitenbesuchern angezeigt wird, deren Browser das Video nicht abspielen können. Hier könnte man auch einen Link zum Video oder zu einer anderen Seite angeben.
Soll das Video ein Vorschaubild haben und soll es ohne Kontrollleiste dargestellt werden sowie automatisch starten und darüberhinaus auch noch eine Dauerschleife machen, funktioniert das mit folgendem Code, sofern eine eigene CSS-Datei mit beispielsweise den unten angegebenen Inhalten dafür verwendet wird:
<div class="videoBox goldenerschnitt"><video poster="/images/vorschaubild.jpg" autoplay="autoplay" loop="loop" width="100%" height="100%"><source src="/images/videos/ahadesign-test.mp4" type="video/mp4" />Der verwendete Browser kann dieses Video nicht wiedergeben. Bitte einen aktuellen Browser verwenden. </video></div>
Sicher ist jedem klar, wie das dann auch ohne eigene CSS-Datei inline funktioniert.
Inhalt der eigenen CSS-Datei:
.videoBox {
position: relative;
height: 0;
overflow: hidden;
}
* html .videoBox {
margin-bottom: 45px;
margin-bot\tom: 0;
} video {
position: absolute;
left: 0;
top: 0;
}
.sechzehnzuneun {
padding-bottom: 56.25%;
}
.vierzudrei {
padding-bottom: 75%;
}
.goldenerschnitt {
padding-bottom: 61,35%;
}
.kontrollabstand-null {
padding-top: 0px;
}
.kontrollabstand-fuenf {
padding-top: 5px;
}
.kontrollabstand-fuenfundzwanzig {
padding-top: 25px;
}
.kontrollabstand-fuenfunddreissig {
padding-top: 35px;
}
Zunächst werden in der CSS-Datei ein paar Klassen erstellt. Zu beachten ist, dass "video" ein HTML5-Element und keine selbst definierte Klasse ist und deshalb in der CSS-Datei keinen Punkt vorangestellt bekommt. Was für den Sternchen-Selektor definiert ist, ist für alte Internet Explorer gedacht. Es folgen weitere Klassen und das war es auch schon.
Für die bereits oben erwähnten Videoformate kann man sich also wie hier, einfach mehrere Klassen anlegen und die gewünschte wie z. B. »sechzehnzuneun« dann leicht im Quellcode des Artikels verwenden. Wie man das benennt, ist völlig egal und kann natürlich auch kürzer als hier sein. Mit den Klassen für Kontrollabstand ist der bereits erwähnte und für selbstgehostete Videos nicht nötige Abstand der unteren Videoleiste zum Player gemeint, wofür eben auch mehrere vordefiniert und dann schnell zugewiesen werden können.
Die responsiven Fähigkeiten können nun getestet werden, indem das Browserfenster beliebig zusammengeschoben und auseinandergezogen wird. Der Videoplayer bzw. das Video wird bei allen Abmessungen stets mitgehen, ohne dass etwas abgeschnitten wird oder das Video eine horizontale Laufleiste provoziert. Alle modernen Browser sollten das Video richtig darstellen. Natürlich gibt es diverse Hacks, die auf nicht unterstützte Geräte eingehen. Das wäre aber ein zusätzliches Thema.
Soll doch mal ein YouTube-Video eingebunden werden, könnte man mit weiteren Klassen und anderem bzw. zusätzlichem HTML-Code reagieren, was aber hier nicht weiter behandelt wird und massenweise im Netz zu finden ist. Zwar ist es ein klein wenig Arbeit, wenn ein responsives Video eingebunden wird, aber dafür völlig kostenlos, was den geringen Aufwand wert sein sollte.
In Joomla 4 kann man unter System -> Site Templates - Template eine benutzerdefinierte user.css anlegen und den hier etwas weiter oben gezeigten CSS-Code darin speichern. In anderen Systemen ist das sicher ähnlich möglich. So muss man sich künftig nur noch um den HTML5-Code kümmern.
Hier das Beispielvideo, welches grob die Code-Einbindung in Joomla 4 zeigt und ansonsten rein für den Test gedacht ist. Einfach die Größe des Browserfensters verändern oder diesen Artikel mit einem anderen Gerät aufrufen, um das responsive Verhalten zu sehen.
Weitere mögliche Optionen für den HTML5-Videoplayer
Wie bereits angemerkt wurde, aktiviert »controls« eine Leiste mit Steuerungsfunktionen für den Benutzer. Sicher häufig genutzt, wird die Option »Poster«, die beispielsweise mit poster="/vorschaubild.jpg" eingebunden wird und natürlich ein definiertes Vorschaubild zeigt, welches man sich ja leicht aus einem eigenen Video generieren kann. Es folgen weitere Optionen kompakt zusammengefasst:
- autoplay: Das Video beginnt sofort mit dem Abspielen, wenn die Seite geladen ist.
- buffered: gibt die Zeitdauer, die im Browser-Cache bereits zwischengespeichert wurde, zurück.
- loop: Video in einer Dauerschleife abspielen
- muted: stellt den Ton des Videos auf stumm
Und es gibt noch »preload« womit definiert wird, wie die Datei beim Laden der Seite in den Browser geladen werden soll. Mögliche Werte sind auto oder ein leerer String, wodurch die Einstellungen des Browsers greifen. Mit »metadata« werden nur Metadaten geladen. Mit »none« erfolgt überhaupt kein Laden der Videodatei schon vorab.
Vielleicht helfen diese kleinen Informationen ein wenig dabei weiter, schnell ein eigenes responsives Video für Website oder CMS einzubinden, ohne lange überlegen zu müssen.
