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:
questo è il codice css: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>
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%; } }
Rispondi quotando