Video als Hintergrundbild mit HTML5 und CSS

Ich bin neulich auf der Suche nach interessanten WordPress-Themes auf mehrere Seiten geraten, wo als Hintergrund der Internetseite ein Video eingespielt wurde.

Da ich mich als Webdesigner mit einem kleinen Nebengewerbe selbstständig gemacht habe, sauge ich solche Sachen natürlich auf wie ein trockener Schwamm und habe mich gleich darauf schlau gemacht, wie man so etwas bewerkstelligen kann. Hier sind meine Ergebnisse.

Video konvertieren

Als erstes muss man das künftige Hintergrundvideo konvertieren, damit es im Internet auch abgespielt werden kann. Da nicht alle Browser das gleiche Format unterstützen, ist es sogar sinnvoll, das Video gleich in mehreren Formaten bereitzuhalten. Schnell und komfortabel geht es mit ffmpeg bzw. avconv.

ffmpeg -i input.mp4 -b 200k -vcodec libx264 -an -g 30 -s 640x360 output.mp4
ffmpeg -i input.mp4 -b 200k -vcodec libvpx -an -f webm -g 30 -s 640x360 output.webm
ffmpeg -i input.mp4 -b 200k -vcodec libtheora -an -g 30 -s 640x360 output.ogv

Die Flagge -an löscht die Audiospur heraus. Dadurch ist später auf der Internetseite kein Ton zu hören.

HTML-Code

Das Video wird anschließend in die HTML-Seite eingesetzt. Dadurch wird der HTML5-Code für Videos verwendet. Das anschließende div wird später erklärt.

Da nicht jeder Browser alle Videoformate unterstützt, sollte man mehrere verschiedene Codecs angeben. Eine Übersicht, welcher Browser-Engine welche Formate unterstützt, gibt es in der englischen Wikipedia.

<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
   <source src="ju52.webm" type="video/webm"> 
   <source src="ju52.mp4" type="video/mp4"> 
   <source src="ju52.ogv" type="video/ogg ogv">
Video not supported </video>

<div id="video_pattern"></div>

CSS-Code

Das Video wird an der oberen linken Ecke ausgerichtet (top: 0px; left: 0px; ) und automatisch auf die Fenstergröße skaliert, ohne dass das Seitenverhältnis verändert wird (min-width: 100%; min-height: 100%; width: auto; height: auto; )

Außerdem habe ich eine PNG-Datei als Pattern über das Video gelegt (daher die zusätzliche div mit der ID video_pattern). Diese kann man auch weglassen, wenn man möchte.

#video_background {
	position: absolute;
	top: 0px;
	right: 0px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
}
#video_pattern {
	background-image: url(./pattern.png);
	position: fixed;
	opacity: 0.5;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
}

 Beispielseite

Für die Beispielseite habe ich das schon aus dem Video-Entwacklungs-Beitrag bekannte Video der Ju 52 verwendet.

[button color=“blue“ url=“https://be-jo.net/tanteju“ size=“medium“]zur Beispielseite →[/button]

Links

Quelle, Quelle,  Videos verkleinern, Webdesign für kleine Firmen