html5自动适应背景,HTML5自适应全屏幕视频背景

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

background: transparent;

}

video {

position: fixed;

right: 0;

bottom: 0;

min-width: 100%;

min-height: 100%;

width: auto;

height: auto;

z-index: -100;

background-size: cover;

}

div {

font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;

font-weight: 100;

background: rgba(0, 0, 0, 0.3);

color: white;

padding: 2rem;

width: 33%;

margin: 2rem;

float: right;

font-size: 1.2rem;

}

h1 {

font-size: 3rem;

text-transform: uppercase;

margin-top: 0;

letter-spacing: .3rem;

}

a {

display: inline-block;

color: #fff;

text-decoration: none;

background: rgba(0, 0, 0, 0.5);

padding: .5rem;

transition: .6s background;

}

a:hover {

background: rgba(0, 0, 0, 0.9);

}

@media screen and (max-width: 500px) {

div {

width: 70%;

}

}

@media screen and (max-device-width: 800px) {

#bgvid {

display: none;

}

}