Issue with video background on my homepage

Solved

Issue with video background on my homepage

GM15
Excursionist
28 1 1

Hello,
I'm using dawn theme, I try to have a video playing in loop full screen that can be customize directly with the shopify customizer. This is working and there is a white logo and white header. The issue come in the next part when I try to have an other version of this header with black logo and black color letter for my other page. As soon as I put the code to do that in the theme.liquid my version of the header for the homepage dissappear and seems to be hidden under laying the video. But the other page works with the second version of the header. Can share the zip file if needed thanks for your help.

Accepted Solution (1)
GM15
Excursionist
28 1 1

This is an accepted solution.

I have redo it from scratch and added a header2.liquid and a header-group2.json with a switch on the theme.liquid , so switch between the 2 header is working great. I have also created a new section called video-background.liquid which integrated into the section of the customiser. my only issue now is that I can't figure out how to make my homepage header transparent so the video is showing. Because I can't see the video I supposed the video-background.liquid is working. I have added the code below on the theme.liquid to make sure it is transparent but still can't see the video. 

 

<style>
{% if template == 'index' %}
.section {
background-color: transparent !important;
}

.header-wrapper, .footer-wrapper, .content {
background-color: transparent !important;
}

.page-width {
position: relative;
z-index: 1;
}

.video-background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

#background-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
{% endif %}
</style>

 

thanks for your help.

 

Screenshot 2024-06-05 at 14.22.14.png

View solution in original post

Replies 2 (2)

Dev-Brad
Shopify Partner
22 0 0

Hey GM15, 

You mentioned you intially added this through the cusotmiser and then you started adding the alternate one through the theme.liquid? Is there a reason you didn't add it through the customiser still? You will need to add sections to pages through the customisers sections selector 

 

Happy to help and take a look if you can provide a video or screenshot? 

7+ Years as an expert Shopify Developer | Message for a free 15 mins consultation
GM15
Excursionist
28 1 1

This is an accepted solution.

I have redo it from scratch and added a header2.liquid and a header-group2.json with a switch on the theme.liquid , so switch between the 2 header is working great. I have also created a new section called video-background.liquid which integrated into the section of the customiser. my only issue now is that I can't figure out how to make my homepage header transparent so the video is showing. Because I can't see the video I supposed the video-background.liquid is working. I have added the code below on the theme.liquid to make sure it is transparent but still can't see the video. 

 

<style>
{% if template == 'index' %}
.section {
background-color: transparent !important;
}

.header-wrapper, .footer-wrapper, .content {
background-color: transparent !important;
}

.page-width {
position: relative;
z-index: 1;
}

.video-background-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}

#background-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
}
{% endif %}
</style>

 

thanks for your help.

 

Screenshot 2024-06-05 at 14.22.14.png