/Html/How to add background video in html

How to add background video in 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>

Source: blog.hubspot.com

Similar codes

35 votes337 views5 answers
Tab in html
Html
1 vote342 views1 answer
Hidden label html
Html
0 vote341 views1 answer
Email reply link html
Html
0 vote378 views1 answer
Uncaught TypeError: Cannot read property 'value' of null at HTMLButtonElement.<anonymous>
Html
0 vote286 views1 answer
Align navbar items center
Html
5 votes336 views2 answers
Data-target in html
Html
0 vote330 views1 answer
ERROR TypeError: Cannot read property 'required' of null reactive forms
Html
13 votes369 views1 answer
Download im<a href="the/name/of/your/file.x" download>ages html code
Html
0 vote350 views1 answer
Remove cell border css
Html
0 vote326 views1 answer
Ta html inside vue data function
Html