Come creare: video a schermo intero
- Pagina precedente Tabella di confronto
- Pagina successiva Modale
Impara come creare uno sfondo video a schermo intero utilizzando CSS.
Sfondo video a schermo intero
Impara come creare uno sfondo video a schermo intero che copre tutta la finestra del browser:
Come creare un video a schermo intero
Passo 1 - Aggiungi HTML:
<!-- Video --> <video autoplay muted loop id="myVideo"> <source src="rain.mp4" type="video/mp4"> </video> <!-- Opzionale: testo di copertura per descrivere il video --> <div class="content"> <h1>Titolo</h1> <p>Lorem ipsum...</p> <!-- Usa il pulsante per pause/play il video tramite JavaScript --> <button id="myBtn" onclick="myFunction()">Pause</button> </div>
Passo 2 - Aggiungi CSS:
/* Imposta lo stile del video: larghezza e altezza 100% per coprire l'intera finestra */ #myVideo { position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%; } /* Aggiungi alcune informazioni alla fine del video/pagina */ .content { position: fixed; bottom: 0; background: rgba(0, 0, 0, 0.5); color: #f1f1f1; width: 100%; padding: 20px; } /* Imposta lo stile del pulsante usato per pause/play il video */ #myBtn { width: 200px; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer; } #myBtn:hover { background: #ddd; color: black; }
Passo 3 - Aggiungi JavaScript:
O puoi aggiungere JavaScript, cliccando sul pulsante puoi pause/play il video:
Esempio
<script> // 获取视频 var video = document.getElementById("myVideo"); // 获取按钮 var btn = document.getElementById("myBtn"); // 暂停和播放视频,并更改按钮文本 function myFunction() { if (video.paused) { video.play(); btn.innerHTML = "Pause"; else { video.pause(); btn.innerHTML = "Play"; } } </script>
- Pagina precedente Tabella di confronto
- Pagina successiva Modale