Ways to set up a video as a background 'image'
48,441
Solution 1
I have not tested it, but you could try to set width/height of <video>
to 100%
then using z-index let all the others element stay on top of it...
Edit: for example to set video as background entire page
<body style="height: 100%;width: 100%">
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video src="" width="100%" height="100%" autoplay>
Your browser does not support the video tag.
</video>
</div>
... rest of your site
Solution 2
You can not apply it as a CSS background (background property). You can give the effect though using layers which is controlled via the z-index property.
Related videos on Youtube
Author by
Toni Michel Caubet
Front end developer and wordpress lover; based in Mallorca, Spain. Founder @ Funcook
Updated on July 05, 2022Comments
-
Toni Michel Caubet over 1 year
I need to set up a website with a video as the background.
Will I be able to use
z-index
to position other elements on top of the video? Is there a better alternative? -
Damp almost 13 years-1 "flash is ALWAYS on top of anything" - wrong. If you use wmode=transparent you can position your flash on any z-index and allow rendering above or below the flash container.
-
Myles Gray almost 13 yearsAh thanks for this, I was unaware, I was always told flash would disregard z-index.
-
Toni Michel Caubet almost 13 yearsDamp, is it posible that wmode=transparent loads a lot CPU?
-
Marcx almost 13 yearsw3schools.com/html5/html5_video.asp btw for ie is not supported, but you can use ogg for firefox and opera, MPEG4 for safari, chrome accept both
-
easwee almost 13 years@Toni Michel Caubet - yes - there are various reported bugs on different OSs that report increased CPU load while the setting is turned on.
-
Myles Gray almost 13 yearsAnything that is CPU/System intensive while another more lightweight option is available should generally not be considered or advised upon.