
Bideo.js – Easy Background HTML5 Videos - _kush
http://rishabhp.github.io/bideo.js/
======
bpedro
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](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for more
info.

~~~
binarydreams
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.

~~~
bpedro
You can always use a polyfill like this one:
[https://github.com/jonathantneal/fitie](https://github.com/jonathantneal/fitie)

------
binarydreams
Author here. Wrote an article on the process including certain issues as well
- [http://codetheory.in/html5-fullscreen-background-
video/](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

        .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
Because the dimension are wrong. Right now you can get it right only with
javascript.

~~~
gelatocar
What do you mean by the dimensions are wrong? I use the same css above and it
works fine.

~~~
angry-hacker
From the submission's page: codetheory.in/html5-fullscreen-background-video/

This explains it what problem does it try to solve.

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

~~~
andreapaiola
It's a feature :D

~~~
andybak
Hmmm. You can't assume the desirability of background video always correlates
to use of a mobile OS. It correlates more strongly to related factors such as
connection speed, battery vs AC power and CPU speed. My laptop tethered and
away from mains probably doesn't want background video. A docked high-end
tablet probably does.

~~~
evan_
Possible use case for the Battery Status API:
[https://developer.mozilla.org/en-
US/docs/Web/API/Battery_Sta...](https://developer.mozilla.org/en-
US/docs/Web/API/Battery_Status_API)

~~~
ecesena
Does it require clicking for permission? I hope no, otherwise it would defeat
the purpose...

~~~
pdkl95
If websites cannot act responsibly and make video and/or audio click-to-
play[1], they are going to be added to the killfile. "Adblockers" are also
useful for blocking annoyances[2], not just ads.

[1] or some other opt-in user option

[2] e.g. [https://github.com/easylist/easylist/blob/master/fanboy-
addo...](https://github.com/easylist/easylist/blob/master/fanboy-
addon/fanboy_annoyance_general_hide.txt)

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

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

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

------
electic
I am on Chrome on a Mac. Doesn't work.

~~~
chinchang
Yeah, doesn't work on http. Try
[https://rishabhp.github.io/bideo.js/](https://rishabhp.github.io/bideo.js/)
Works gr8!

~~~
electic
Ah that was the problem, thanks!

------
binarydreams
Try https if the page doesn't load.

