BLS Posted December 25, 2023 Share Posted December 25, 2023 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? Link to comment
tuanphan Posted December 27, 2023 Share Posted December 27, 2023 Hi, Can you share link to this page? 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!) Link to comment
BLS Posted January 6 Author Share Posted January 6 Hi there. Link is ashleycbattle.com Password: preview Link to comment
tuanphan Posted January 9 Share Posted January 9 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; } }} 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!) Link to comment
Emski Posted Thursday at 05:37 AM Share Posted Thursday at 05:37 AM 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 Link to comment
tuanphan Posted yesterday at 09:37 AM Share Posted yesterday at 09:37 AM 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; } } 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!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment