How do I hide or fade out HTML video after the video has stopped playing

All I want to do is to make my video disappear when it’s finished so my H1 title can be displayed. The video and H1 are in the header.

This can be solved in CSS or Javascript I don’t mind. Thanks in advanced.

<div class="header__title">
      <h1>
        When
        <!-- Green highlight effect -->
        <span class="highlight">banking</span>
        meets<br />
        <span class="highlight">the future</span>
      </h1>
      <h4>The future of money is here.</h4>
      <img
        src="img/Javacoin homepage picture.png"
        class="header__img"
        alt="Javacoin items"
      />
    </div>

  <div class="background__video">
  <video autoplay muted>
  <source src="Javacoin Corporate Intro - Final.mp4" type="video/mp4">
  </video>
  </div>

31 thoughts on “How do I hide or fade out HTML video after the video has stopped playing”

Leave a Comment