How do I change the size of a video?

Shopify Discussion
1

I added a video to one of the pages on my website; the size is perfect on mobile but ginormous on desktop.

How do I make it smaller? (This is a 3rd party template.)

Here is a link to the page with the video:

https://admin.shopify.com/store/bb215d-78/themes/141110313128/editor?previewPath=%2Fcollections%2Fstock-photos

Thank you! :blush:

1 Like
2

Hey @vanessalynn

Your website is password protected, can you share the front end password as well?

Best Regards,

Moeed

3

Hey @vanessalynn I hope you are doing well.

Please share your Store URL and Password [if applicable] so that I take a look and provide you solution code.

Thanks

4

Sure, I’m sorry! It’s demo.

5

The password is demo. Do you need the store URL or the URL I provided in the original post? Because I don’t have this section added to navigation yet. I’ll drop the store URL in case you need it - I’m sure you know better than I do!

https://thedigitaldreamweaver.com/

6

Could you please gave me hint where this video is?

I check on home but I didn’t found it.

7

If you look at my original post, I dropped the link directly to that page because I haven’t added it to the navigation yet.

8

Password is demo, link directly to the page with the video is provided in my original post.

9

But this is admin link. I need preview link. I can only access admin link if I have Store access.

10

You’d need to post the link to a page containing an active block with video.

Noone can access your internal link that you posted in the 1st message.

11

Hey @vanessalynn ,

This can be done with CSS. Please follow these steps to get the expected result:

  1. Edit your live/main theme’s code.

  2. Search and edit theme.liquid file.

  3. Search and paste the following code above that line.

If done right. The result should look like this:

image (1).png
image (1).png3410×1962 742 KB

12

That made it smaller but it’s too wide and cuts off the top…is there a way to either change the height dimension somehow or keep the original dimensions and just shrink it?

Thank you so much for your help.

13

https://thedigitaldreamweaver.com/collections/stock-photos

Does this work?

14

Does this work?

https://thedigitaldreamweaver.com/collections/stock-photos

15

Glad that we are making progress here. Add this code before the line in my previous code.

#MainContent .video-section__media.media-fit-cover video {
  object-fit: contain
}

@media (min-width: 1024px) {
  .video-section.isolate.page-width.section-template--17843769671848__video_bYnPHr-padding {
    max-width: 50% !important;
  }
}
16

YAY!!! Thank you so so so much!!! That worked. I am very grateful for your help, thank youuuuu!!!