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

Question

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.

<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>

score 0 · Answer 1 · edited Jan 30 '21 at 22:27

0

ONENDED EVENT

You should use onended event to make changes in your app.

let video = document.querySelector("video");
let h1 = document.getElementById("title"); // You should attach an identifier to that h1
video.onended = function(){
  h1.style.display = "none";
}

And if you want to be more fancy, you should use transition property in css to the base element

h1{
  transition: all ease-in-out .3s
}

https://www.w3schools.com/tags/av_event_ended.asp

edited Jan 30 '21 at 22:27

Dharman

30,962
25
85
135

answered Jan 30 '21 at 22:22

Pedro Uzcátegui

343
3
16

Thank you very much this worked I just had to change some of your code in JS and add an id to the h1, once again thank you for your help! – Emmanuel Appiah Jan 31 '21 at 00:20

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

1 Answers1

ONENDED EVENT