Fullscreen Background-Videos in HTML5 einbinden

Matthias Fänger

Ein Kunde wollte auf der Startseite seiner neuen Website ein großflächiges Video im Hintergrund laufen haben. Das sieht gut aus, bringt aber so einige Tücken mit sich. Es sollte sich der Bildschirmgröße anpassen, die Datenmenge sollte nicht zu groß sein, die Qualität aber immer noch passen und ausreichen. Daneben gibt es das Problem, dass HTML5-Videos im Hintergrund per Autoplay auf einigen Android-Geräten und unter iOS nicht starten und dafür ein passendes Fallback-Bild angezeigt werden soll.

Auf der Suche nach einer passenden Lösung bin ich auf ein großartiges, kleines jQuery-Script namens Vide gestoßen. Der Untertitel auf der Website Easy as hell jQuery plugin for video backgrounds hält, was er verspricht. Mit dem kleinen Script lassen sich Videos mit einigen einfachen Codeschnipseln auf der Website einbinden. Es löst zwar noch nicht das Problem mit der Datenmenge in Bezug auf die Qualität, die Einbindung ist aber ein Kinderspiel und funktioniert – soweit ich das getestet habe – reibungslos. Danke an den Ilya Makarov für die Entwicklung.

HTML5 CSS Videos HowTo Tutorial Linktipp jQuery

Sie brauchen Hilfe?

Sie brauchen Hilfe bei der Erstellung einer professionellen Website? Suchmaschinenoptimierte und mobilfreundliche (responsive) Websites sind mein Spezialgebiet. Ich berate Sie gerne unverbindlich zum Thema Webdesign und -entwicklung.

Kontaktieren Sie mich ›