“Comment ajouter une vidéo d'arrière-plan dans HTML” Réponses codées

Comment ajouter une vidéo d'arrière-plan dans HTML

<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
  <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>

<h1>THIS IS A RIVER.</h1>
<h2>How majestic.</h2>

<style>
  /* video background */
  #background-video {
    height: 100vh;
    width: 100vw;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

  /* page content */
  h1, h2 {
    color: white;
    font-family: Trebuchet MS;
    font-weight: bold;
    text-align: center;
  }

  h1 {
    font-size: 6rem;
    margin-top: 30vh; 
  }

  h2 { font-size: 3rem; }

  @media (max-width: 750px) {
      #background-video { display: none; }
      body {
        background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
        background-size: cover;
      }
  }
</style>
Upset Unicorn

Comment ajouter une vidéo en arrière-plan en HTML

How to create a full screen video background.
source: w3schools.com

<!-- The video -->
<video autoplay muted loop id="myVideo">
  <source src="backgroundVideo.mp4" type="video/mp4">
</video>

<!-- Optional: some overlay text to describe the video -->
<div class="content">
  <h1>Heading</h1>
  <p>Lorem ipsum...</p>
  <!-- Use a button to pause/play the video with JavaScript -->
  <button id="myBtn" onclick="myFunction()">Pause</button>
</div>
Pharos

Comment ajouter une vidéo en arrière-plan HTML

<video autoplay loop muted id="backgroundVideo">
  <source src="background.mp4" type="video/mp4">
</video>

<style>
	#backgroundVideo {
      position: absolute;
      right: 0;
      bottom: 0;
      min-width: 100%;
      min-height: 100%;
      overflow: hidden;
    }
</style>
I_Like_Cats__

Réponses similaires à “Comment ajouter une vidéo d'arrière-plan dans HTML”

Questions similaires à “Comment ajouter une vidéo d'arrière-plan dans HTML”

Parcourir les réponses de code populaires par langue

Parcourir d'autres langages de code