现在的位置: 首页 > 综合 > 正文

Fullscreen HTML5 Page Background Video

2018年02月09日 ⁄ 综合 ⁄ 共 488字 ⁄ 字号 评论关闭

Fullscreen HTML5 Page Background Video

Fullscreen video background is possible with pure CSS/HTML5, there is no need for a framework. Check the snippet out.

CSS

  1. video#bgvid {
  2. position: fixed; right: 0; bottom: 0;
  3. min-width: 100%; min-height: 100%;
  4. width: auto; height: auto; z-index: -100;
  5. background: url(polina.jpg) no-repeat;
  6. background-size: cover;
  7. }

HTML

  1. <video autoplay loop poster="polina.jpg" id="bgvid">
  2. <source src="polina.webm" type="video/webm">
  3. <source src="polina.mp4" type="video/mp4">
  4. </video>

抱歉!评论已关闭.