Bideo.js – Easy Background HTML5 Videos

[+] bpedro|9 years ago|reply

Interesting solution but can't it be achieved with the object-fit CSS property?

Using `object-fit: cover` will make the video resize maintaining its aspect ratio and filling its entire box.

See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit for more info.

[+] binarydreams|9 years ago|reply

Interesting! It works pretty well except that there's no IE support. So the resizing logic included in the library is useful for projects that need IE10+ support.

[+] addedlovely|9 years ago|reply

Came here to say the same: http://caniuse.com/#feat=object-fit

[+] binarydreams|9 years ago|reply

Author here. Wrote an article on the process including certain issues as well - http://codetheory.in/html5-fullscreen-background-video/

I did try to work around slow network speed (can see in the network_speed_optim branch on github but with the current APIs it's a tough problem to crack.

The current implementation is basic but works well. Suggestions welcome so that I can improve it.

[+] wanda|9 years ago|reply

    .bg-video {
      position:    fixed;
      top:         50%;
      left:        50%;
      transform:   translate(-50%,-50%);
      min-width:   100%;
      min-height:  100%;
      width:       auto;
      height:      auto;
      z-index:     -1 

      /* don't set a background color or image on body */
    }

I mean, why do you need JavaScript?

[+] angry-hacker|9 years ago|reply

Because the dimension are wrong. Right now you can get it right only with javascript.

[+] fessa|9 years ago|reply

It doesn't look like it works on mobile though.

[+] untog|9 years ago|reply

It likely can't - videos are enforced as tap-to-play on iPhones, no matter what.

Which is good in most ways, but also means that people are converting videos into hugely bandwidth-wasting GIFs instead. I'd rather videos be "tap for sound" and autoplay at this point.

[+] binarydreams|9 years ago|reply

The demo works on mobile but ya not entirely responsive in a lot of cases. Will be done soon.

[+] andreapaiola|9 years ago|reply

It's a feature :D

[+] detaro|9 years ago|reply

How do I get click-to-play for all HTML5 videos in my browser?

[+] binarydreams|9 years ago|reply

I will be implementing click to play and pause (necessary for iOS, etc.). Contributions welcome! :)

[+] rhubarbquid|9 years ago|reply

Like other background videos I've seen, this prevents the computer from sleeping in Mac OS with Chrome (but not Safari).

30 comments