Hide a video when it finishes playing?

Hi,
Ive tried a few things like onended in the video tags. I cant seem to get this to work. I have a 15 second video that autoplays on page load but I want it to disappear (preferably fade out) after its done playing. Anyone have any pointers? I've tried this

<div id="introvid">
<video class="xar_meplayer" src="index_htm_files/stage manager intro video.mp4" controls autoplay width = "100%" height="100%" onended="myFunction()"/>
</div>

function myFunction() {
var x = document.getElementById("introvid");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}


But it doesn't work. Any help is appreciated

A different way to do this that might work for you? I inserted a coloured rectangle 1920px x 1080px for the closing frames of my intro video to match the background colour of the website e.g https://initiostar.co.uk. In my case the headline message and menu have a delayed fade-in animation over the video. The intro video is on the index page, plays once and the menu takes you to pages 1, 2 etc. Works on the desktop and mobile variant and uses export option scale-to-fit-width.

HTML Code:

---

<! --1920 x 1080 video set to fill the browser window-->
<style>
* {  box-sizing: border-box;}

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
</style>

<video autoplay muted id="myVideo">
<source src="Intro.mp4"  type="video/mp4">
</video>

---

Another way if you have a headline banner video (say 1920px x 400px) is to place the video at the top of the page and have the menu bar scroll to stick-at-top whereby the video scrolls out of view. If the video has sound you may need to code a pause video when it scrolls out of site.

Attachment 126362