How can I adjust the dawn theme code for portrait product videos?

Store Design
1

Hi, does anyone know how to fix or have the code to make my product videos as portrait. When I click on it, it’s showing my image background and it’s not showing up as portrait. Thanks in advance.

Url: https://lua-wolves-crystals.myshopify.com

password: bahcri

922E25DE-172C-404E-B0E4-9B068A672DF3.jpeg
922E25DE-172C-404E-B0E4-9B068A672DF3.jpeg828×1792 84 KB

2

Hi @Popcorn ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
	.product-media-modal__dialog .global-media-settings {
		padding-top: 100vh !important;
	}
}

Hope it helps!

3

Hi! I tried the coding but unfortunately, it didn’t work. I checked on android, iphone, and my computer and they all had the same issue. I’m trying to upload my videos as 3:4 ratio straight from my phone into the app. But it keeps showing up as landscape where the sides of the video are transparent or shows my background, depending on what device you use.

4

Screen Shot 2022-08-19 at 9.15.02 PM.png
Screen Shot 2022-08-19 at 9.15.02 PM.png1730×1491 475 KB

Here’s a screenshot of what I’m experiencing. Ive tried contact shopify support but they told me to come here instead to look for a solution.

5

Hi @Popcorn ,

My previous tutorial is only for mobile, if you want to show desktop, please

go to Assets > base.css and paste this at the bottom of the file:

@media screen and (min-width: 750px) {
  .product__media-list .deferred-media {
        padding-top: 133% !important;
  }
}

Hope it helps!

6

Thanks so much! The only issue I’m having now is that on my mobile phone, the video looks stretched out when I click on it. Is there any way to fix this? Thanks in advance!

IMG_0954.PNG
IMG_0954.PNG828×1792 241 KB

7

Hi @Popcorn ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px) {
	.product-media-modal__dialog .global-media-settings video{
		height: auto !important;
		bottom: 0 !important;
		margin: auto !important;
	}
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

8

When I click on the videos in my phone, the videos still seem stretched out at first. I would have to press the play button to revert it back to its original size. Is there any way to prevent it from stretching out and having it fixed and still? Thanks. :slightly_smiling_face:

9

I’ve tried the code but I still have the same issue regarding the video stretching out.

10

Hi @Popcorn ,

Please add code:

@media screen and (max-width: 749px) {
	.product-media-modal__dialog .deferred-media__poster img{
		    width: 100% !important;
    height: auto !important;
	}
}
11

Thank you so, so much! Truly grateful for your help. Your codes has helped resolve the video issues. I appreciate your patience & help! :slightly_smiling_face:

1 Like