video as site background? HTML 5

Question

I want to use a video as a background instead of an image that automatically stretches to the whole screen (background).

I would also like to rotate videos and images.. so that there is a random video/image displayed in any order.

It would also be nice to know how to delay video playback, so that the video only plays once 30 seconds after the site loaded.

thx!

Please consider that many visitors will hate this feature (I actively block this with adblock). Furthermore, videos may hurt the user in two instances -- on metered connections and when viewing the page in a remote desktop session which can become unusable if upload bandwidth is low. — Igor Levicki, Jun 09 '15 at 16:27

score 36 · Answer 1 · edited May 04 '14 at 03:28

36

Take a look at my jquery videoBG plugin

http://syddev.com/jquery.videoBG/

Make any HTML5 video a site background... has an image fallback for browsers that don't support html5

Really easy to use

Let me know if you need any help.

edited May 04 '14 at 03:28

amiry jd

27,021
30
116
215

answered Mar 15 '11 at 04:06

sydlawrence

1,882
2
17
21

1

Thank you Sydlawrence! I started in an HTML5 book (Lawson and Sharp), then went to the web...searched everywhere for "video background html5" and read through loads of not-quite-the-right-information. Your solution worked like a charm. – Jun 11 '11 at 05:49
@sydlawrence that is excellent! I have implemented your solution. I have one problem though with integration and that is the poster flashes up for a second before the video loads - how can it be done so that the poster only loads up if there is no compatibility with the html5 video? – willdanceforfun Jun 19 '12 at 23:41
hi syd, your plugin works great, but it doesn't seem to work on firefox? how is this possible? Everywhere else it works – woony Sep 25 '12 at 11:16
hey @sydlawrence! how can I mute the audio by default? thanks in advance for help. – Parik Tiwari May 21 '14 at 23:51

score 26 · Answer 2 · answered Sep 27 '10 at 03:09

First, your HTML markup looks like this:

<video id="awesome_video" src="first_video.mp4" autoplay />

Second, your JavaScript code will look like this:

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

And last but not least, your CSS:

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

This will create a video element on your page that starts playing the first video right away, then iterates through the playlist defined by the JavaScript variable. Your mileage with the CSS may vary depending on the CSS for the rest of the site, but 100% width/height should do it on a basic page.

thx, but the fullscreen code doesnt really work. it just shows the video in its original size in the upper left top corner and also makes makes the rest of the text on the site disappear! — Roland, Oct 22 '10 at 19:13
Well if you want fullscreen, then the rest of the text on the site will obviously disappear. As for the fullscreen not working, try setting the video element's height and width to the viewport size. For example, `video.width = 1024; video.height = 768;` — Jey Balachandran, Oct 26 '10 at 17:13
Take a look at my answer down below. It takes into account all screensizes :) — sydlawrence, Mar 15 '11 at 04:07

score 8 · Answer 3 · edited May 05 '13 at 14:28

I might have a solution for the video as background, stretched to the browser-width or height, (but the video will still preserve the aspect ratio, couldnt find a solution for that yet.):

Put the video right after the body-tag with style="width:100%;". Right afterwords, put a "bodydummy"-tag:

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

Put all your content inside the bodydummy-div and put the z-indexes correctly in CSS like this:

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

Hope I could help. Let me know when you could find a solution that the video does not maintain the aspect ratio, so it could fill the whole browser window so we do not have to put a bgimage.

score 0 · Answer 4 · answered May 16 '22 at 05:03

Tailwind CSS (on React.js/JSX)

If you are using Tailwind CSS, you must set the width, and height to screen size, then set object-fit to cover:

<video autoPlay muted loop id="myVideo" src="/video_bg.mp4" itemType="video/mp4" className='w-screen h-screen object-cover'>

Plain CSS

... or you can just apply this CSS to your video element:

#myVideo {
   width: 100vw;
   height: 100vw;
   object-fit: cover;
}

video as site background? HTML 5

4 Answers4

Linked

Related