yodagerms Posted August 22, 2021 Share Posted August 22, 2021 Site URL: https://www.mptimken.com/ Hi! I have looked and scoured the internet but I cannot find a solution for this. A background video on the home page is severely cropped when playing on mobile. I have found CSS code to resize images, but not videos and not background videos specifically. Please help me! Link to comment
tuanphan Posted August 23, 2021 Share Posted August 23, 2021 9 hours ago, yodagerms said: Site URL: https://www.mptimken.com/ Hi! I have looked and scoured the internet but I cannot find a solution for this. A background video on the home page is severely cropped when playing on mobile. I have found CSS code to resize images, but not videos and not background videos specifically. Please help me! Hi, Add to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="60c9576936ffab5dd961c323"] iframe { width: 100% !important; height: auto !important; left: 0 !important; } [data-section-id="60c9576936ffab5dd961c323"] img { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } [data-section-id="60c9576936ffab5dd961c323"] { min-height: unset !important; height: 30vh; margin-top: 20vh; } div#block-yui_3_17_2_1_1623810957566_3840 { position: relative; top: -150px; }} 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
yodagerms Posted August 25, 2021 Author Share Posted August 25, 2021 Hi thank you so much, but now it's not playing on my phone anymore, its just the static image. 😕 Also on the squarespace design page it shows the video is smaller than the static image and is in front of it. (See image) How do I make this cover the background? Link to comment
yodagerms Posted August 25, 2021 Author Share Posted August 25, 2021 Can you please also help me move the text to the bottom of the image? Link to comment
tuanphan Posted August 26, 2021 Share Posted August 26, 2021 I think you can add video background on desktop, image background on mobile. What do you think? You can add 2 sections, then we will give the code to show 1 on desktop, show 1 on mobile 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
yodagerms Posted August 26, 2021 Author Share Posted August 26, 2021 Sure but I'm not sure I understand exactly what you're suggesting. Link to comment
tuanphan Posted August 29, 2021 Share Posted August 29, 2021 I meant show video on desktop, show fallback image on mobile. Because sometimes videos don't play well on mobile 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