Launching soon - Video

[orchiworld]

Hi 

Theme: Dawn

www.orchi.com

I am customizing the launching soon landing page 

I want to add a video behind the newsletter sign up instead of an image - how do I go about that? 

The video is already uploaded the shopify and is used on the homepage

[theycallmemakka]

Hi @orchiworld ,

can you prodide link to the video?

[orchiworld]

This is the link: https://cdn.shopify.com/videos/c/o/v/a81f7ecb165f4cdab55916bae1be5c1c.mp4

[theycallmemakka · Accepted solution]

Hi @orchiworld 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file
4) Add the following code just above tag </head>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        var videoContainer = document.querySelector(".banner__media.media");
        
        var videoElement = document.createElement("video");
        videoElement.setAttribute("autoplay", "");
        videoElement.setAttribute("muted", "");
        videoElement.setAttribute("loop", "");
        videoElement.setAttribute("playsinline", "");
    
        var sourceElement = document.createElement("source");
        sourceElement.setAttribute("src", "https://cdn.shopify.com/videos/c/o/v/a81f7ecb165f4cdab55916bae1be5c1c.mp4");
        sourceElement.setAttribute("type", "video/mp4");
    
        videoElement.appendChild(sourceElement);
        videoContainer.appendChild(videoElement);
    
        videoElement.style.width = "100%";
        videoElement.style.height = "100%";
        videoElement.style.objectFit = "cover";
    });
</script>

<style>
    .password-header,
    footer{
        display: none!important;
    }  
    .banner__content {
        height: 100vh!important;
    }   
  .banner__media.media img {
      display: none!important;
  }
</style>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[orchiworld]

This works flawlessly! 

How do I achieve to get the "ORCHI" logo at top center of the video?

[theycallmemakka]

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file
4) Add the following code just above tag </head>

document.addEventListener("DOMContentLoaded", function() {
const body = document.body;

const styleElement = document.createElement('style');

styleElement.innerHTML = `
body.password.gradient {
  max-height: 100vh;
  overflow: hidden;
}

.fixed-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 41px;
  position: absolute;
  z-index: 10000;
  width: 100%;
}

.fixed-logo img {
  height: 25px;
}
`;
body.appendChild(styleElement);
const fixedLogo = document.createElement('div');
fixedLogo.classList.add('fixed-logo');
fixedLogo.innerHTML = `<img src="https://orchi.com/cdn/shop/files/ORCHI_4b4c3cc4-504d-4eda-b7ea-802cd5f30a53.png?v=1718128332&amp;width=500">`;
body.appendChild(fixedLogo);
    });

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka