Вставил фоном html5 видео (видео расположено локально):
HTML
</header>
<div class="video"></div>
<video autoplay loop>
<source src="po_13.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="po_13.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="po_13.ogg" type='video/ogg; codecs="theora, vorbis"'>
Your browser does not support HTML5 video.
</video>
</header>
Css
header{
/*background-image: url("../img/slide1.png");*/
background-size: cover;
background-position: center center;
background-attachment: fixed;
height: 100vh;
min-height: 100px;
}
video{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
width: auto;
/*height: auto;*/
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
.video{
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -99;
/*background: #000;*/
background:url(../images/overlay.png) repeat;
opacity: 0.8;
}
И тут возникла проблема - видео совсем не отражается на мобильных устройствах - просто черный экран, ни на гугл хром (андройд), ни на iphone. Что я сделал не так?
UPDATE
я уже урезал код вот так:
<video>
<source src="/po_13.mp4" type='video/mp4' ></source>
<source src="po_13.webm" type='video/webm' ></source>
<source src="po_13.ogg" type='video/ogg' ></source>
Your browser does not support HTML5 video.
</video>
и все равно не работает
UPDATE2
<video controls>
<source src="po_13.mp4" type="video/mp4">
<source src="po_13.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Если вставляю так, то включается плеер и при нажатии на play видео начинает проигрывается, но мне бы видос как фон поставить с loop и autoplay