Detroit Posted November 25, 2023 Posted November 25, 2023 (edited) 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 Edited November 25, 2023 by Detroit include website
tuanphan Posted December 1, 2023 Posted December 1, 2023 It looks like you figured it out with this CSS code? @media screen and (max-width: 767px) { iframe[src*="youtube"] { width:100% !important } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
SilverBirchStudio Posted April 8 Posted April 8 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!
tuanphan Posted April 9 Posted April 9 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 } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
SilverBirchStudio Posted April 11 Posted April 11 (edited) 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! Edited April 11 by SilverBirchStudio additional information
tuanphan Posted April 11 Posted April 11 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
SilverBirchStudio Posted April 12 Posted April 12 Thanks, @tuanphan I will play around with it. I appreciate your help!
Irma_K Posted Friday at 09:40 PM Posted Friday at 09:40 PM 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.
tuanphan Posted yesterday at 04:03 AM Posted yesterday at 04:03 AM 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; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment