How can I create a full screen intro video for my site?

[mattkilliconic]

I am trying to create a full screen 'intro' video to my site (taste theme) that will play through a ~30 sec video (no audio) and have a button on top or below that says 'enter' or that appears at the end of the video.

Once clicked, you will be directed to the home page. Mobile & desktop please

Thanks!

[sahilsharma9515]

Hi @mattkilliconic This can be possible with few workarounds that I can think of for now.

1. You need to create a different page in which you will add the video inside your store and then with the help of custom coding you need to show that page as your first page like the password page use to show up when your store is password protected.
2. The another way through which you can achieve this is just create a html page and host it on the hosting server and link that page to your shopify store i.e. once someone will click on the video or on the enter button it will redirect the customer from that html page to your home page.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[mattkilliconic]

I have no problem creating the page for option 1, but I unfortunately do not know how to code that onto the home page. 

option 2 sounds like what I am trying to do, however I do not know how to link it to show up before my homepage. Should I add this page as a section to my homepage? I tried that last night and it did not seem to do anything. 

Thanks!

Matt

[sahilsharma9515]

Hi @mattkilliconic If you are using option 1 then you need to add custom code through which you can show a page before the home page.

If you are using option 2 then you just need to add the video and button in the page and host it on the separate server and link that page to you shopify store so that once anyone click on that video or button then they will land on the home page.

Please note : For option one your link should look like this: www.xyz.com/page name

For option 2 your link should look like this: www.pagename.xyz.com i.e. you need to have the subdomain.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[mattkilliconic]

option 1 would be easiest for sure. so I would create a page, then how would I code it to show before the home page?

thank you for the help! 🙂

[Mallz]

I have the same problem can you add this intro button with a code for me pls? And i have another questions dear sahilsharma [REDACTED]

[sahilsharma9515]

Hi @Mallz Yes I would love to help you and you can specify me your question?

If you want we can move this conversation from here to whatsapp or email or in shopify private message, which ever is suitable to you.

Best Regards

Sahil 

[deepaksharma]

Hello there @mattkilliconic 
Do you want to show the video from your youtube channel or upload the file directly, based on that I can provide you the code along with the guide

[mattkilliconic]

Hello!

thank you for reaching out. 

I have the video file already uploaded into my shopify 'files'. if I could get the code for that, that would be incredible! thank you. just so you know my final goals for this, I am trying to have the video play (full screen) and have a button in the lower center that says 'enter' and then it could just close out the video overlay and go to my homepage. thank you!

[mattkilliconic]

hello, just following up on this! It would be greatly appreciated! thanks!

[deepaksharma]

Open theme customization add a new section called custom liquid.

paste below code

Replce the video link with yours video link

<style>
    video {
      min-width: 100%;
      min-height: 100%;
      width: 100%;
      height: auto;
      z-index: 1;
    }
  </style>
  <video autoplay="" loop="" muted="" playsinline="">
    <source src="your-video.mp4" type="video/mp4">
    Your browser does not support the video tag contact developer.
  </video>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var video = document.querySelector('video');
      video.addEventListener('click', function() {
        video.paused ? video.play() : video.pause();
      });
    });
  </script>

before pasting the code make sure to change the video link

src="your-video-link.mp4"

If you are unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully, it will help you. If yes then Please don't forget to hit Like and Mark it as the solution!

[mattkilliconic]

in middle of the code it says "Your browser does not support the video tag contact developer." 

I tried this but it just showed up as a regular video banner on my site and not as a whole page display. I want it to be a separate page as a 'first destination' before the homepage with a video playing across the whole screen with an 'enter' button on it that then brings the customer to the home page.

Thanks! I appreciate the help!

Thanks!

[cubanlinks]

you definitely saw those guys on tiktok doing insane shopify animated intro's

[Skitzstreet]

Yeah haha i want to know how that works if anyone can help me out i would greatly appreciate it! 🙂

[Skitzstreet]

Any luck? Bru