changing video size on desktop view

[getsunlight]

Hi, I have been trying to configure the script to make the desktop view for a vertical loop video smaller for desktop, but i couldn't find it. I'm using Dawn theme with custom video autoplay liquid from (https://websensepro.com/blog/how-to-add-autoplay-video-section-in-shopify-without-app-dawn-v15/).

The website loads ok on mobile, just too big on desktop. Other codes shared here didn't work.

Any help welcome!

Site: www.getsunlight.sg

[Sweans · Accepted solution]

Hi @getsunlight ,

To address the issue with the vertical loop video size on the desktop view, you can add custom CSS to adjust the video dimensions. Here's how to do it in the Dawn theme:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.
3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.
4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

<style>
@media only screen and (min-width: 768px) {
.wbs-pck__image__wrapper {
height: 100vh; /* or your preferred height*/
}
}
</style>

5. Click Save to apply the changes.

This approach allows you to customize the size of your video on desktop devices, ensuring it doesn't appear too large.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[jrfellers]

UPDATE!  I figured this out...I simply needed to adjust the height value to 50.  I initially thought it was not applying after first loading it.  I had to delve into what 100vh really meant to understand that I should have expected no difference until I changed the value from 100 to something else.  

Hi Sweans, 

            First, thank you for posting this to the community earlier last year!  It was one of the first things that came up when I searched for the same problem.  I'm using the same auto play scripted video section shared by the WebSensePro team. 

I tried to apply the CSS code you shared to my theme.liquid file but it had no effect whatsoever.   My site is www.jiggerjunction.com.  I'm trying to narrow the height of the video but ONLY for desktop (it seems to be perfect for mobile).  I tried to copy/paste some of that file here, but it seems the forum rules don't allow that and .txt files can't be attached. 

Thanks for any help in advance!

---

@Sweans wrote:

Hi @getsunlight ,

To address the issue with the vertical loop video size on the desktop view, you can add custom CSS to adjust the video dimensions. Here's how to do it in the Dawn theme:

1. Go to Online Store > Themes.
2. Click on Actions next to your current theme and select Edit code.
3. In the code editor, locate the theme.liquid file. This is typically found under the Layout folder.
4. Scroll to the bottom of the theme.liquid file, and just above the closing </body> tag, add the following custom CSS code:

<style>
@media only screen and (min-width: 768px) {
.wbs-pck__image__wrapper {
height: 100vh; /* or your preferred height*/
}
}
</style>

5. Click Save to apply the changes.

This approach allows you to customize the size of your video on desktop devices, ensuring it doesn't appear too large.

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans

[BSS-TekLabs]

- Here is the solution for you @getsunlight 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

.wbs-pck__image__wrapper {
    height: 100vh !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[getsunlight]

Hi, thank you!

is there a way to retain the height so that the ceiling light is in full display, but to scale it down in general? It would be ok with borders at the side.