How do I hide or fade out HTML video after the video has stopped playing, then display the H1 header title which is under

Question

I want the video to hide/fade out after the video has finished. And I want the h1 header title to appear in the same position when the video ends (hide/fades out).

How can I implement this in JavaScript or CSS?

HTML code:

<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="Minimalist bank items"
      />
    </div>

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

You need to investigate the ended event, absolute positioning and CSS animations/transforms - have a go and come back with some code if you are still stuck. — A Haworth, Jan 30 '21 at 19:10
Does this answer your question? [Executing function at end of html5 video](https://stackoverflow.com/questions/14517639/executing-function-at-end-of-html5-video) — s.kuznetsov, Jan 30 '21 at 19:10
... or https://stackoverflow.com/questions/13557306/video-events-html5-jquery — s.kuznetsov, Jan 30 '21 at 19:11
@s.kuznetsov no none of them helped me thanks for the recommendation though — Emmanuel Appiah, Jan 30 '21 at 22:04

score 1 · Answer 1 · answered Jan 30 '21 at 19:15

const video = document.getElementById('vid');

video.onended = () => {
  document.getElementsByClassName('background__video')[0].style.opacity = "0";
  document.getElementsByClassName('header__title')[0].style.opacity = "100";
}

.header__title {
  transition: 1s;
  opacity: 0;
}

.background__video {
  transform : translateY(-50%);
  transition: 1s;
}

<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="Minimalist bank items" />
</div>

<div class="background__video">
  <video autoplay muted id="vid">
  <source src="https://www.radiantmediaplayer.com/media/big-buck-bunny-360p.mp4" type="video/mp4">
  </video>
</div>

This might do!

Unfortunately, this didn't work maybe I didn't make it clear. I want the video to stay in its current position and I want it to cover the whole header section. When the video ends, I want it to disappear while the H1 title takes its place, not under the video. — Emmanuel Appiah, Jan 30 '21 at 21:43

How do I hide or fade out HTML video after the video has stopped playing, then display the H1 header title which is under

1 Answers1

Related