Resize Video Block Ratio for Mobile View

Hello. I have added a video to my client's homepage and the current ratio is 16:9 (which is fine for desktop) but for mobile, the 16:9 ratio is too small for a optimized and responsive design.

For mobile, I would like the video block in the individual section to be a different ratio from desktop and ensure the video content fills/stretches to the new video block ratio.

Can I get any help with this?

Hi,

Can you share link to this page?

Hi there. Link is ashleycbattle.com 

Password: preview

On 1/6/2024 at 2:04 PM, BLS said:

Hi there. Link is ashleycbattle.com 

Password: preview

Use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1702838154093_6896 {
.native-video-player.video-player {
    padding-bottom: 120% !important;
}
.video-player .plyr video {
    object-fit: cover !important;
}
}}

Hi @tuanphan

I have a similar issue, that my landscape video is too small to be viewed on mobile.

The url is murall.au

It would be amazing if you could help me out. I have tried a couple of different things none working.

Thanks

On 5/9/2024 at 12:37 PM, Emski said:

Hi @tuanphan

I have a similar issue, that my landscape video is too small to be viewed on mobile.

The url is murall.au

It would be amazing if you could help me out. I have tried a couple of different things none working.

Thanks

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-0e9f858f204e05273e64 .video-player {
    padding-top: 90% !important;
}
div#block-0e9f858f204e05273e64 video {
    object-fit: cover !important;
}
}

site url: https://www.end-of-summer.org/2023-the-creativity-of-a-new-generation

I have a vertical video on my site, and I would like to adjust the sizing based on mobile and desktop, I got it to a good size on desktop but how do i adjust it for mobile too? 

this is the code im using now:

#block-yui_3_17_2_1_1724824044603_26285.video-block .video-player{
 padding-bottom:15%}

I managed to make it bigger but my video player is too big on mobile.

You can use something like this to make it run on mobile only

@media screen and (max-width:767px) {
#block-yui_3_17_2_1_1724824044603_26285.video-block .video-player{
 padding-bottom:15%}
}