Всем привет. Вопрос такой: как поставить видео на фон в html странице?
2 ответа
html
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
<source src="//demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="//demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="//demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. </p>
<button>Pause</button>
</div>
CSS
body {
margin: 0;
background: #000;
}
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
.stopfade {
opacity: .5;
}
#polina {
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;
}
#polina button {
display: block;
width: 80%;
padding: .4rem;
border: none;
margin: 1rem auto;
font-size: 1.3rem;
background: rgba(255,255,255,0.23);
color: #fff;
border-radius: 3px;
cursor: pointer;
transition: .3s background;
}
#polina button:hover {
background: rgba(0,0,0,0.5);
}
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) {
html { background: url(//demosthenes.info/assets/images/polina.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}
JS
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})