How can I make an intro video play only on the homepage?

[eikbidstrup]

Hello, i´m helping a friend create an website for her buisness, she really wanted a short intro video on the webpage and 16 hours later, i got something to work. But the problem is evertime the page refreshes or go to another section like "contact it plays the intro file, where it should just play the intro only when refreshing the "homepage" i hope some of you guys can help me, i´ll paste the code and a link to the website.

#overlay-video {
background-size: cover;
background-position: 50% 50%;
position: absolute;
margin: auto;
width: 100%;
height: 100%;
right: -100%;
bottom: -100%;
top: -100%;
left: -100%;
object-fit: cover;
z-index: -100;
}
.da-video-overlay {
z-index: 9999;
position: fixed;
inset: 0px;
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.da-video-wrap {
overflow: hidden;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 10px;
}
.da-video-outer {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}

Sizing code

Player code-

</div>

</div>

<ul hidden>
<li id="refresh-page-message">Choosing a selection results in a full page refresh.</li>
<li id="selection-message">Press the space key then arrow keys to make a selection.</li>
</ul><div class="da-video-overlay" id="video-overlay">
<div class="da-video-outer">
<div class="da-video-wrap">
<video src="https://cdn.shopify.com/videos/c/o/v/c51de67ed38941ceb8ae23931c18810d.mp4" autoplay muted playsinline id="overlay-video">
video not supported
</video>
</div>
<div>
</div>
<script type='text/javascript'>
const el = document.getElementById('overlay-video');
el.addEventListener('ended',myHandler,true);
function myHandler(e) {
document.getElementById('video-overlay').style.display = "none"
}
</script></body>

</html>

https://rhodflowers.myshopify.com/

[made4Uo]

Hi @eikbidstrup 

Try to replace your script code with the code below

<script type='text/javascript'>
const el = document.getElementById('overlay-video');
el.addEventListener('ended',myHandler,true);
function myHandler(e) {
document.getElementById('video-overlay').style.display = "none"
}
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
     el.autoplay = false;
}, 500)
});

</script><

[eikbidstrup]

Hello Made4Uo thank you so much for the reply.! i tried implementing your code in script but still experience the same problem. 😞 i´ll keep on trying thou.

[made4Uo]

Hi @eikbidstrup,

Do you mind sharing your website?

[eikbidstrup]

Ofc not! https://rhodflowers.myshopify.com/ 
thank you 😉

[eikbidstrup]

I forgot to remove password, im at work so ill open the webpage in an hour or so. 🙂