Fullscreen video background - Mr. Boy May 21 '19 at 12:16

Question

If it is ok for you to use jquery you can try http://dfcb.github.io/BigVideo.js/ or http://vodkabears.github.io/vide/

About the other questions in question:

it is not a good idea to shoot 50-100MB video in the face of a poor user especially if he is on a mobile data connection
YouTube and Vimeo definitely have a better bandwidth than your hosting company
even if you don't use the jquery plugin using an iframe for a background video isn't going to work well (if at all)
I'm not a real expert but I can't get the point of the SEO for a background video

kaosmos · Answer 1 · 2016-04-20T13:36:01.827

2

If it is ok for you to use jquery you can try http://dfcb.github.io/BigVideo.js/ or http://vodkabears.github.io/vide/

About the other questions in question:

it is not a good idea to shoot 50-100MB video in the face of a poor user especially if he is on a mobile data connection
YouTube and Vimeo definitely have a better bandwidth than your hosting company
even if you don't use the jquery plugin using an iframe for a background video isn't going to work well (if at all)
I'm not a real expert but I can't get the point of the SEO for a background video

edited Apr 20 '16 at 13:36

answered Nov 16 '15 at 23:52

kaosmos

558
9
23

Since I can't comment (yet) on someone else answer, I'm writing here. Using mediaqueries for conditional content (as Alex Mo suggested) [won't stop the browser to load the video](https://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/) or other [resources declared in the HTML](https://www.christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/) and I'd like to ask on which info is based the idea that an iframe loads slower than something else (AFAIK the speed depends on the amount of data to d/l and the number of requests to the server). – kaosmos Nov 19 '15 at 00:05
Basically iFrames cause additional server calls and this is the reason why you should avoid it. Plus: iframes block your main page's _onload_ until iframe's content is loaded completely. In my opinion it is also not best practise to use an iframe for background vidoes becouse you have no control over the content it will show. Use a short video for your background. Compress it and include it in mp4 and webm fomat directly with ` – Mibit Nov 19 '15 at 10:53
Thank you, Alex, for the clarification. Actually I wonder if you can use at all an iframe as a full page background (but I never tried it, so this is just a guess) – kaosmos Nov 19 '15 at 10:57
You're welcome. I was wondering too if it is possible and regarding to this post it should be possible: [link](http://stackoverflow.com/questions/5867985/full-screen-iframe-with-a-height-of-100) But as you can see, this functionality is not intended. – Mibit Nov 19 '15 at 11:04
1

I modified the answer since I found another jQuery plugin worths noting for full background video (http://vodkabears.github.io/vide/) – kaosmos Apr 20 '16 at 13:34

score 1 · Answer 2 · answered Nov 18 '15 at 08:35

Here is a pure CSS and HTML solution, which I recommend, since iframes take a bit longer to load and google want pages to load fast (impacts SEO!!).

<video id="bgvid" autoplay loop poster="vid.jpg">
  <source src="vid.webm" type="video/webm">
  <source src="vid.mp4" type="video/mp4">
</video>

CSS:

video#bgvid { 
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(vid.jpg) no-repeat;
  background-size: cover; 
}

Here is also the media query for mobile devices:

@media screen and (max-device-width: 800px) {
    html {
         background: url(vid.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

Linked