How can I increase the height of a video on a mobile screen?

[Anakaryn]

Hello !

I would like to increase my video height on mobile screen. Let me show you just bellow :

I want to go from this :

To this :

I noticed by inspecting the code that i need to change the height of the video with CSS in this file : www-player.css

If i change “height : 219px” to “height : 100vh” it’s working, however i cannot find where the css file is located in shopify code editor or even if it’s possible to find it.

URL store : fred-boulangeries.myshopify.com

Password : fraino1

Thank you if anyone can help me on this !

[Litos]

Hi @Anakaryn ,

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

@media screen and (max-width: 749px) {
  .section-template--15531429298276__93e029f3-f25c-44a8-9a86-2a788544b695-padding .video-section__media {
    height: 100vh !important;
}
}

Hope it helps!

[Anakaryn]

@Litos Hi ! Thank you but still not working

When you play the video, it resizes…

[Litos]

Hi @Anakaryn ,

If you want to show it like the mockup you send, the video will be cut off, if you still want:

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

@media screen and (max-width: 749px) {
.section-template--15531429298276__93e029f3-f25c-44a8-9a86-2a788544b695-padding .video-section__media {
    overflow: hidden !important;
}
.section-template--15531429298276__93e029f3-f25c-44a8-9a86-2a788544b695-padding .video-section__media iframe {
    width: 315% !important;
}
}

I recommend you to display the video in your correct size, if you want just add the following code:

@media screen and (max-width: 749px) {
	.section-template--15531429298276__93e029f3-f25c-44a8-9a86-2a788544b695-padding .video-section__media {
		height: 0 !important;
		padding-bottom: 60% !important;
	}
}

Hope it helps!

[Anakaryn]

Hello @Litos , thank you a lot this is what i wanted !

Is it possible to center the video ?

[Litos]

Hi @Anakaryn ,

Please add code here:

Code:

left: -150%;

[Anakaryn]

Thank you !!