Custom Liquid Block Dawn Theme - Video Banner

Store Design
1

Hello,

I have, I think, successfully added my custom liquid to my dawn theme to display a video as my banner on my homepage (from the edit theme. not css code). However, I cannot seem to position the video under the header. I don’t want a white gap under the header. I want the video directly under the header. I have tried different ways but I cannot figure it out.

The video I uploaded to my files on my shopify account and then inspected the code and added height and width. Worked fine. But how do I code the position?

This is the code I have:

<video position=“absolute” !important; width=“100%” height=“fit-content” controls=“” autoplay=“” name=“media” loop=“”>

1 Like
2

without seeing the site

change this

<video position=“absolute” !important; width=“100%” height=“fit-content” controls=“” autoplay=“” name=“media” loop=“”>

to this (basic integration)

<video position=“absolute” !important; width=“100%” height=“fit-content” controls=“” autoplay=“” name=“media” loop=“”>

Or

<video position=“absolute” !important; width=“100%” height=“fit-content” controls=“” autoplay=“” name=“media” loop=“”>

then add this to → assests → theme.scss AT THE BOTTOM OF THE FILE

.my-video {margin:0px auto;width:100%;height:auto;display:block;"}

You may have to fudge it a little for your needs.

Tip: before editing the code, always go to Online store → actions —> download theme file (and it will email you the theme link ) this way you have a backup of the code in case you mess something up

3

Thank you so much @AfterDarkGrafx for responding. Is it easier for you if I give you the guest password to view my site?

I’ll try these codes soon

4

@AfterDarkGrafx I tried both codes and changed the margin, but it didn’t move the position of the video.

Also, is there a way to hide the controls for the video?

5

Also tried adding the bottom code you suggested under header.liquid in “sections” under a code I had added previously to the banner image I had. However, it still didn’t remove the white gap above the video. I added this:

.header-wrapper { position: absolute; !important; width: 100%; background-color: transparent; @.my-video and (max-width: 700px) }

above the

code you provided.

I was hoping this would do the trick considering its under the header wrapper =(

6

I figured it out!

For anyone else interested in removing the gap above and below a custom liquid block,

go to base.css lines 227 - 233, change the “5” before “rem” to “0rem” like this:

@media screen and (min-width: 750px) {

.element-margin {

margin-top: calc(0rem + var(–page-width-margin));

}

.spaced-section {

margin-top: calc(0rem + var(–page-width-margin));

}

Only issue now is figuring it out on mobile view

7

did that change affect any other elements on the page?

for mobile you can try this (COPY THIS and place it at the BOTTOM of base css file…

@media screen and (max-width: 750px) {

.element-margin {

margin-top: calc(0rem + var(–page-width-margin));

}

.spaced-section {

margin-top: calc(0rem + var(–page-width-margin));

}

}

just changed this @media screen and (min-width: 750px) from min-width to max-width

8

Thankfully no it did not affect the other elements. At least for those lines in base.css.

But for for mobile view, i noticed it is easier on the eye to leave the gap above the video.

But there is still a gap under the video for mobile view. This is due to the shopify template. Changing the rem padding for .spaced-section {margin-top: 5rem; affects the all elements (in base.css). So I’m thinking of moving the block up instead but I dont know how.

Screen Shot 2022-01-07 at 12.05.32 PM.png
Screen Shot 2022-01-07 at 12.05.32 PM.png980×1386 148 KB

9

@AfterDarkGrafx the code you provided for mobile view does work. Sorry I didn’t mention it before.

Is there a way to keep the space for mobile view but maybe move the next block upwards to elminate the space between the video and the block?

10

I just put before the code and it worked for me