Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ways to set up a video as a background 'image'

Tags:

css

flash

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?

like image 358
Toni Michel Caubet Avatar asked Feb 10 '11 15:02

Toni Michel Caubet


2 Answers

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
like image 73
Marcx Avatar answered Nov 21 '22 09:11

Marcx


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.

like image 41
atrljoe Avatar answered Nov 21 '22 07:11

atrljoe