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

Question

I am creating a website with a full screen background video for the title section. I would like the site to load and run as quickly and smoothly as possible, so I don’t know if there could be a problem that 50-100 MB of video is loaded on the home page before launching (although it will probably be a video stream, since it loads but I don’t know anything about how this works).

My first part of this question is that I very rarely stumble upon video backgrounds that are stuck in loading. Is it because I was lucky with the connections I use, or the people who make video files just smart and somehow compress the video to a small file size?

The second part of this question is, what is the best way to implement this video on my clients website? Use HTML5 tag <video>? (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 use YouTube or Vimeo by pasting it like <iframe>? I guess the real question is: if my hosting company (One.com) offers me more bandwidth than YouTube or Vimeo? Or if there is a recommended way to do this?

And if you can make a comment about what is best for SEO purposes, then this will also be appreciated.

Answer 1

Youtube (, tubular.js) :

1) youtube , ,

2) youtube ( , , )

, (http://www.seanmccambridge.com/tubular/)

, bigvideo, masterslider .., - , , , , // .

-, , : www.avocats-huertas.com

Answer 2

jquery, http://dfcb.imtqy.com/BigVideo.js/ http://vodkabears.imtqy.com/vide/

, :

• 50-100 , .
• YouTube Vimeo , .
• jquery, iframe , ( )
• , SEO .

Answer 3

Here is the pure CSS and HTML solution that I recommend, as iframes take a little longer to load and load pages that want pages to load quickly (affects 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 a multimedia request for mobile devices:

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