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

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

eikbidstrup
Tourist
4 0 1

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/

 

 

Replies 5 (5)

made4Uo
Shopify Partner
3852 717 1201

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><
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
eikbidstrup
Tourist
4 0 1

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
Shopify Partner
3852 717 1201

Hi @eikbidstrup,

 

Do you mind sharing your website?

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
eikbidstrup
Tourist
4 0 1

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

eikbidstrup
Tourist
4 0 1

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