Personalized checkout and custom promotions with Shopify Scripts
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/
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><
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.
Hi @eikbidstrup,
Do you mind sharing your website?
I forgot to remove password, im at work so ill open the webpage in an hour or so. 🙂
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024