Is it possible to make my site load its content/links ONLY after a 3-5 sec video is done playing?

Hi, just wondering if this is possible. If yes, how?

Thanks!

You mean show a fullscreen video >> After 3-5 seconds, hide video + show main content?

Exactly @tuanphan except the "hide video" part. 

Thanks!

On 7/17/2024 at 7:20 PM, nandopomy said:

Exactly @tuanphan except the "hide video" part. 

Thanks!

But if we don't hide video, fullscreen video will overflow the content

Or you mean after video finish, the site will scroll down a bit to see page content?

Or if you have a desired layout, I can imagine your case & help you easier

Ohh, you're right. So then yep, show a fullscreen video >> After 3-5 seconds, hide video + show main content.

Thanks!

21 hours ago, nandopomy said:

Ohh, you're right. So then yep, show a fullscreen video >> After 3-5 seconds, hide video + show main content.

 

Thanks!

Try this quick demo, to see if it is what you want? here I set 15 seconds

https://tuanphan3.squarespace.com/video-loading-effect-desktop-mobile?noredirect

pass: abc

That's it! How would I go about doing this?

Thanks a lot!

On 7/21/2024 at 12:56 AM, nandopomy said:

That's it! How would I go about doing this?

 

Thanks a lot!

You can use this code to Website Tools > Code Injection > Footer. Replace with your video url

<div class="splash-wrapper" id="load-container">
  <video autoplay loop muted>
  <source src="https://static1.squarespace.com/static/65099e4b0bacc94c32040af8/t/6654c936503f41361bd58f01/1716832574197/ALIG+-+Website+video_9_1920x1080.mp4" type="video/mp4">
</video>

</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  height:100vh;
  width:100vw;
  display:flex;
  flex-flow: column nowrap;
  justify-content:center;
  align-items:center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration:.65s;
  animation-delay: 15s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -200vw;}
}
</style>

Thank you so much! Will report back if there's any issues with this setup

Hey, @tuanphan. I tried copying and pasting the code to my footer section and I replaced the video url with my 3-sec YouTube video one but it didn't work. Am I doing something wrong?

Thanks again!

19 hours ago, nandopomy said:

Hey, @tuanphan. I tried copying and pasting the code to my footer section and I replaced the video url with my 3-sec YouTube video one but it didn't work. Am I doing something wrong?

 

Thanks again!

Code will work with direct video url only. It won't work with Youtube video. You can send me Youtube link, I will test & give you new code

Got it. Here's the YouTube link: 

Is it better having the video on YouTube or having it direct?

Thanks!

22 hours ago, nandopomy said:

Got it. Here's the YouTube link: 

Is it better having the video on YouTube or having it direct?

Thanks!

If you have video direct url, it would be easier. Youtube doesn't support direct url.

First, you edit Site Footer > Add a Video Block > Add your Youtube URL

Next, use below tool to find ID of Video Block

Next, use this new code

<style>
#enter-video-block-id {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  height:100vh;
  width:100vw;
  display:flex;
  flex-flow: column nowrap;
  justify-content:center;
  align-items:center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration:.65s;
  animation-delay: 15s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -200vw;}
}
</style>

Perfect, Thank you!

Is there a way to do this without having the video block that I added to show on my website? (I don't want the video block on the footer to be visible to viewers)

Anyone please?

Thanks!

Use this code to Custom CSS box, it will hide Video from Footer

footer.sections #enter-video-block-id {
	display: none !important;
}

Next, edit this line

to this

display:flex !important;

I tried doing everything above but nothing happens (The 3 sec video doesn't play when the website loads).

Thoughts?

You mean that code make video disappear or?

I mean that the code didn't do anything (the 3 sec YouTube video doesn't play when the website loads).

Thanks!

On 8/2/2024 at 2:04 PM, nandopomy said:

Perfect, Thank you!

Is there a way to do this without having the video block that I added to show on my website? (I don't want the video block on the footer to be visible to viewers)

I though you said code worked and you need to make video in footer invisible? So The code I sent will hide video on Footer

Sorry for not explaining myself better. The code did hide the video block from the footer but the 3 sec video never plays when loading the website.

I tried both with or without the video-block-hiding CSS code but the video doesn't play on both instances.

Thanks!

Anyone please?

Can you share site url?

www.thepomyshop.com

Thanks!

Anything? Thanks!