Resize Video For Mobile

Hi, I have a video on my homepage that I tried to resize for mobile view when my website is viewed on mobile but everytime I change the video size in the mobile view edit, it also affects the size in the desktop view edit. I would like my video to remain big for desktop view and to automatically resize smaller proportionally when my website is viewed on mobile. Thanks! My website is http://www.detroitbuyholdinvest.com

It looks like you figured it out with this CSS code?

@media screen and (max-width: 767px) {
    iframe[src*="youtube"] {
        width:100% !important
    }
}

I tried your code in my custom css, @tuanphan, but it isn't working for me for some reason. Here's one of the YouTube embeds I'd like to resize on mobile: 

https://silverbirchstudio.com/procreate-tips/gouache-flower-painting

I would appreciate any ideas!

10 hours ago, SilverBirchStudio said:

I tried your code in my custom css, @tuanphan, but it isn't working for me for some reason. Here's one of the YouTube embeds I'd like to resize on mobile: 

https://silverbirchstudio.com/procreate-tips/gouache-flower-painting

I would appreciate any ideas!

With your case, use this code

 iframe[src*="youtube"] {
        width:100% !important
    }

Thank you so much for the reply, @tuanphan. The video looks better now, and I thank you.

Is there a way to make the preview image match the ratio of the video itself? As you can see, this vertical sliver doesn't match the horizontal video, and cuts off all the information. Any way to fix this?

The tablet view also does this, although it is a bit wider. Thanks in advance for any help you can give!

3 hours ago, SilverBirchStudio said:

Thank you so much for the reply, @tuanphan. The video looks better now, and I thank you.

Is there a way to make the preview image match the ratio of the video itself? As you can see, this vertical sliver doesn't match the horizontal video, and cuts off all the information. Any way to fix this?

The tablet view also does this, although it is a bit wider. Thanks in advance for any help you can give!

 

I think you can try Video Block then use Custom Featured Image

Thanks, @tuanphan I will play around with it. I appreciate your help!

Hi @tuanphan,

I have a similar issue with my videos. I was able to resize them for mobile, but they still look so small. Example: https://www.irmakollar.com/work/greengo.

The videos are embedded from Vimeo. Here is the code I use: 

<iframe src="https://player.vimeo.com/video/1029138301?autoplay=1&loop=1&muted=1&background=1"width="100%" height="640" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> <style> @mediascreen and (max-width: 767px) { iframe[src*="vimeo"] { width: 100% !important; height: auto; } } </style> 

Is there any way to make this video wider?

Another problem is that for some reason, when I look at this page from my cell phone, the color of this video is different.

On 12/7/2024 at 4:40 AM, Irma_K said:

Hi @tuanphan,

I have a similar issue with my videos. I was able to resize them for mobile, but they still look so small. Example: https://www.irmakollar.com/work/greengo.

The videos are embedded from Vimeo. Here is the code I use: 

<iframe src="https://player.vimeo.com/video/1029138301?autoplay=1&loop=1&muted=1&background=1"width="100%" height="640" frameborder="0" allow="autoplay; fullscreen" allowfullscreen> </iframe> <style> @mediascreen and (max-width: 767px) { iframe[src*="vimeo"] { width: 100% !important; height: auto; } } </style> 

Is there any way to make this video wider?

Another problem is that for some reason, when I look at this page from my cell phone, the color of this video is different.

 

   

You can use extra CSS code

@media screen and (max-width:767px) {
   div#block-yui_3_17_2_1_1731474502405_21123 iframe[src*="vimeo"] {
       transform: scale(1.5);
       position: relative;
       top: -20px;
   }
}