ho utilizzato questo codice per visualizzare un video a piena pagina, ma funziona solo su google chrome.....
su firefox e opera non si vede nessun video,su safari si sente solo l'audio ma senza visualizzare il video, qualcuno sa dirmi il perché? ringrazio in anticipo.
questo il codice html:
codice HTML:
<!doctype html><html>    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <title>Fullscreen Video</title>        <meta name="description" content="">        <meta name="viewport" content="width=device-width, initial-scale=1">        <link rel="stylesheet" href="css/style.css">    </head>    <body>
    <div class="fullscreen-bg">        <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">            <source src="video/coniglio.mp4" type="video/mp4">            <source src="video/coniglio.ogv" type="video/ogg">            <source src="video/coniglio.webm" type="video/webm">        </video>    </div>
    
    </body></html>
questo è il codice css:
codice:
body {
    margin: 0;
    padding: 0;
}


.content {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    padding: 0 15px;
}


h1 {
    margin: 60px 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
}


p {
    margin: 0 0 30px 0;
    font-size: 30px;
    line-height: 1.5;
}


.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}


.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


@media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        height: 300%;
        top: -100%;
    }
}


@media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
        width: 300%;
        left: -100%;
    }
}