Fullscreen video background - <video> vs YouTube/Vimeo-<iframe>?

Question

I'm making a website that has a fullscreen video background, for the header section. I would like for the site to load and run as fast and smooth as possible, so I don't know if it could be trouble that the homepage has to load a 50-100mb video before running (even though it probably will stream the video, as it loads - but I know nothing about how this works).

My first part of this question is, that I very rarely stumble across video-backgrounds that gets stuck loading. Is that because I'm lucky with the connections I use, or are the people who are making the video backgrounds just smart and somehow compress the video to a small file-size?

The second part of this question is, which way is the best to implement this video background on my clients website? Is it to use the HTML5 <video> tag? (found in this link):

<video style="width: 1776px; height: 1009px; margin-left: -98px; 
margin-top: 0px;" id="videobcg" class="fill" width="1580" height="898"
preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"
poster="url-to-poster-picture.jpg">
  <source src="sites/default/files/videos/basic_home.mp4" type="video/mp4">
  <source src="sites/default/files/videos/basic_home.webm" type="video/webm">
  Sorry, your browser does not support HTML5 video.
</video>

... or is it to use YouTube or Vimeo, by inserting it as an <iframe>? I guess the real question is, if my hosting company (One.com) offer me more bandwidth than YouTube or Vimeo? Or if there's a recommended way out there to do this?

And if a comment can be made about what's better for SEO-purposes, then that would be appreciated as well.

Answer 1

You definitely have to upload your video on Youtube and use a plugin to display it on your site (tubular.js for example), for the following reasons:

1) youtube doesnt need the browser to load the video in full, it is caching small parts, making it accessible nearly immediately

2) youtube scales the resolution of the video to your bandwidth (if you have low bandwidth, the video will display in low quality, but the waiting time to start playing the video will be optimal)

I strongly suggest that you use a plugin such as tubular (http://www.seanmccambridge.com/tubular/)

I have tried many of them, bigvideo, masterslider, etc... but for me tubular is the easiest to integrate, is not buggy, and the most important in my opinion, you can add layers of text/elements/links on top of the video.

You can have a look at the following website that I have done for a customer using tubular : www.avocats-huertas.com

Answer 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

Answer 3

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;
    }
}