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.

Share:
48,441

Related videos on Youtube

Toni Michel Caubet
Author by

Toni Michel Caubet

Front end developer and wordpress lover; based in Mallorca, Spain. Founder @ Funcook

Updated on July 05, 2022

Comments

  • Toni Michel Caubet
    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
    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
    Myles Gray almost 13 years
    Ah thanks for this, I was unaware, I was always told flash would disregard z-index.
  • Toni Michel Caubet
    Toni Michel Caubet almost 13 years
    Damp, is it posible that wmode=transparent loads a lot CPU?
  • Marcx
    Marcx almost 13 years
    w3schools.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
    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
    Myles Gray almost 13 years
    Anything that is CPU/System intensive while another more lightweight option is available should generally not be considered or advised upon.

Related