No html5 mobile videos
-
Installed html5 videos (video localized):
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;
}
And there's a problem - the video doesn't really affect the mobile devices - just a black screen, not a google chrome (androyd) or an iphone. What did I do wrong?
UPDATE
I already cut the code like this:
<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>
and still doesn't work.
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>
If you put it like that, the player is on and the video is starting to lose, but I'd like a view of the loop and autoplay.
-
Html must be valid.
<div class="video"> <video autoplay="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> </div>In html, the page code of the first tag should necessarily be
<!DOCTYPE html>♪
Also in the head, for example,<meta http-equiv='X-UA-Compatible' content='IE=Edge' />
