ciao, seguendo varie guide, ho messo questo codice su un sito:
supportato da questo CSS:
il tutto per visualizzare un video a larghezza 100% nella parte iniziale della pagina web, ebbene sui browser classici sui pc si vede tutto ok, sui cell e tablet (sia iphone che android) il video non parte e si visualizza l'immagine sostitutiva...
Come posso fare x fare visualizzare il video anche sugli smartphone?
HTML:
<header>
<div class="overlay"></div>
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="img/drone2.mp4" type="video/mp4">
<source src="img/drone2.webm" type="video/webm">
<source src="img/drone2.ogv" type="video/ogv">
</video>
</header>
HTML:
header {
position: relative;
background-color: black;
height: 75vh;
min-height: 25rem;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@media (pointer: coarse) and (hover: none) {
header {
background: url('http://www.xxxxxx.ixx img/drone.png') black no-repeat center center scroll;
}
header video {
display: none;
}
}
Come posso fare x fare visualizzare il video anche sugli smartphone?