Klassische Website Hintergründe bestehen aus einer einfachen Farbe, einem Farbverlauf oder einer Grafik. Jede Form des Hintergrundes hat Vor- und Nachteile. Wer auf schnelle Ladezeiten Wert legt, greift auf den einfarbigen Hintergrund zurück. Eine Grafik benötigt dagegen schon etwas mehr Zeit bis zur vollständigen Darstellung.
Ein Video als Hintergrund zu verwenden, war vor einigen Jahren noch völlig undenkbar. Videos bestehen aus bis zu 24 Bildern pro Sekunde (Fernsehbild) und bringen somit auch ein viel größeres Datenvolumen mit sich. Mit einer viel schnelleren Internetverbindung als vor zehn Jahren, ist dieser Aspekt heute allerdings schon fast zu vernachlässigen. Gerade beim Videodienst Youtube werden Videos sehr stark komprimiert und das Streaming der bestehenden Internetverbindung angepasst.
Bing macht’s vor
Der Suchmaschinendienst Bing bindet bereits Videos als animierter Hintergrund ein. Bei der Eingabe eines Suchbegriffes kann man sich also auch über das Leben der Pinguine im Hintergrund amüsieren. Solche “Rich Media” Elemente erhöhen die Aufmerksamkeit des Betrachters und hinterlassen einen bleibenden Eindruck.
Youtube Video als Hintergrund einbinden
Die einfachste Möglichkeit ein Youtube Video als Hintergrund einzubinden ist über ein Iframe. Mit Hilfe des negativen z-index Wert wird das Video auf die hinterste Ebene der Website gelegt. Somit erscheinen Text und andere Elemente der Website vor dem Video. Damit das Video sich auch der Browsergröße anpasst, wurde die Höhe und Breite des Videos mit 100% festgelegt. Der folgende Quelltext verwendet das Video mit der ID=L8GrP-o6BzE. Für einen anderen Videohintergrund einfach diese ID durch die des anderen Videos ersetzten (Zeile 8). Die ID ist Bestandteil der URL von Youtubevideos. Man kann diese also in der Browseradresszeile herauslesen/kopieren.
<html>
<head>
<title>Video als Websitehintergrund</title>
<style>body{margin:0;padding:0;text-align:center;font-family:arial;font-size:12px;color:#fff}#main{padding:3em 2em;background-color:#333;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-150px;width:340px;height:140px;-moz-opacity:0.35;-khtml-opacity:0.35;opacity:0.35;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=35);filter:progid:DXImageTransform.Microsoft.Alpha(opacity=35);filter:alpha(opacity=35)}form{margin:2em 0}h2{margin:0;padding:0;font-size:1.6em}a:link,a:visited{color:#fff;text-decoration:underline}small a:link{text-decoration:none}small a:link{text-decoration:none}</style>
</head>
<body>
<div style="position: fixed; z-index: -99; width: 100%; height: 100%">
<iframe frameborder="0" height="100%" width="100%" src="https://www.youtube.com/embed/L8GrP-o6BzE?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1"></iframe>
</div>
<div id="main">
<h2>
Video Hintergrund
</h2>
<p>
Auch Videos lassen sich als Websitehintergrund einsetzen.<br/>Als Quelle diente hier ein Youtubevideo - Berlin im Zeitraffer
</p>
<p>
Wie genau die Einbindung von Videos als Hintergrund funktioniert, erfahrt ihr hier
</p>
</div>
</body>
</html>
Live testen
Es existiert eine Beispieldatei mit dem oben angegebenen Quelltext. Die Datei kann hier abgerufen werden. Das Video im Hintertgrund startet automatisch, kann allerdings vom Besucher mit einem Klick angehalten werden. Sämtliche Einstellmöglichkeiten (Lautstärke, Kommentare, …) wurden ausgeblendet.
Star Wars – Brutal!
telnet://towel.blinkenlights.nl
Hi, I do think this is an excellent blog. I stumbledupon it 😉 I will
revisit yet again since I book-marked it. Money and freedom is the greatest way to change, may
you be rich and continue to guide others.
… [Trackback]
[…] Read More: just4it.de/video-als-website-hintergrund.html […]