video - 没有 jquery 的完整页面浏览器 html5 视频

Question

试图创建一个完整的浏览器 html5 视频效果，与此 http://css-tricks.com/perfect-full-page-background-image/相同

但是通过视频我阅读了这个线程 Full-bleed background videos？ 和这个 Html5 全屏视频

这似乎是最好的解决方案，但使用 jquery http://syddev.com/jquery.videoBG/ 但是有没有 jquery 的万无一失的方法？

Answer 1

我知道这是一个老问题，但答案很简单。

只需使用此 html5 视频代码，或类似以下内容：

<video id="videobackground" preload autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

然后应用这个css：

#video_background { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}

min-height 和 min-width 将允许视频保持视频的纵横比，这通常是任何普通浏览器在正常分辨率下的纵横比。任何多余的视频都会从页面一侧流出。

从我的网站阅读更多内容：HTML 视频背景教程 - 仅限 HTML5 和 CSS！http://kesilconsulting.com/web-designer-magazine/html-video-background-tutorial/#ixzz2O3BPNZE6