tuanphan Posted June 19, 2023 Share Posted June 19, 2023 On 6/15/2023 at 9:19 PM, 27Moon said: thanks for your reply. I've added the code but unfortunately it doesn't look correct, now the header is almost completely gone and actually the black banner up and down is not disappearing. Any hints? Use this new code @media screen and (max-width:767px) { [data-section-id="64496145f57a345d30632979"] { min-height: unset !important; height: 20vh; } [data-section-id="64496145f57a345d30632979"] h1 { font-size: 20px; line-height: 30px; position: relative; top: 50px; } } 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
BillyDesign123 Posted June 21, 2023 Share Posted June 21, 2023 Hey Tuanphan, I just launched a real estate site and am running into the same thing with a background video. On the desktop it looks totally fine but the scaling on mobile is way off. I am guessing most people coming to my site will be looking on their phones so would love to have it correct. Website is www.smithmountainlakerealestate.com attached a few screen shots. What would be the best way to make sure it fits right on both desktop and mobile. Thank you so much for your time. Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 On 6/21/2023 at 11:24 PM, BillyDesign123 said: Hey Tuanphan, I just launched a real estate site and am running into the same thing with a background video. On the desktop it looks totally fine but the scaling on mobile is way off. I am guessing most people coming to my site will be looking on their phones so would love to have it correct. Website is www.smithmountainlakerealestate.com attached a few screen shots. What would be the best way to make sure it fits right on both desktop and mobile. Thank you so much for your time. Can you share link to page where you use video? 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
angellll Posted December 22, 2023 Share Posted December 22, 2023 https://beagle-chinchilla-58ek.squarespace.com/ Hi, I tried all the code and its not working. I want to resize the background on the homepage. Link to comment
tuanphan Posted December 23, 2023 Share Posted December 23, 2023 14 hours ago, angellll said: https://beagle-chinchilla-58ek.squarespace.com/ Hi, I tried all the code and its not working. I want to resize the background on the homepage. You mean this video? 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
SarahGrubb Posted February 16 Share Posted February 16 (edited) Hi! I'm having the same issue on my site. https://seniorpost-cms.squarespace.com/new-home It's a vinmeo video uploaded as a section background. Resizing the page though, the visible part of the video get smaller and smaller until all I have left is the middle of the video. 😞 **update - Besides the other code snippets here, I tried changing the aspect ratio on the iframe to aspect-ration: 16/9 !important; widith: auto!important. If I insert different number, I do see changes there, but just moving the iframe left or right, I can't seem to get it to fully display correctly on mobile. Can someone help please? Edited February 16 by SarahGrubb Update Link to comment
tuanphan Posted February 17 Share Posted February 17 23 hours ago, SarahGrubb said: Hi! I'm having the same issue on my site. https://seniorpost-cms.squarespace.com/new-home It's a vinmeo video uploaded as a section background. Resizing the page though, the visible part of the video get smaller and smaller until all I have left is the middle of the video. 😞 **update - Besides the other code snippets here, I tried changing the aspect ratio on the iframe to aspect-ration: 16/9 !important; widith: auto!important. If I insert different number, I do see changes there, but just moving the iframe left or right, I can't seem to get it to fully display correctly on mobile. Can someone help please? I see you solved? Or no, but if make it fullsize, we will need to reduce its height 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
MatthiasHoegg Posted May 10 Share Posted May 10 @tuanphan I've got the same issue on my website https://matthiashoegg.com/ I'd like the index header video to not be cropped on mobile, so ideally it always maintains it's 16:9 proportions. Many thanks 🙏 Link to comment
tuanphan Posted May 12 Share Posted May 12 On 5/10/2024 at 10:40 PM, MatthiasHoegg said: @tuanphan I've got the same issue on my website https://matthiashoegg.com/ I'd like the index header video to not be cropped on mobile, so ideally it always maintains it's 16:9 proportions. Many thanks 🙏 You mean this video? 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
MatthiasHoegg Posted May 12 Share Posted May 12 @tuanphanthat’s the one I want to lock the proportions of, or not crop as much, yes. Thanks for looking into it 🙏🙏 Link to comment
tuanphan Posted May 13 Share Posted May 13 6 hours ago, MatthiasHoegg said: @tuanphanthat’s the one I want to lock the proportions of, or not crop as much, yes. Thanks for looking into it 🙏🙏 You can use this code to Website > Website Tools > Custom CSS @media screen and (max-width:640px) { body.homepage .page-banner-wrapper.page-banner-has-video { height: 30vh !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
MatthiasHoegg Posted May 13 Share Posted May 13 6 hours ago, tuanphan said: You can use this code to Website > Website Tools > Custom CSS @media screen and (max-width:640px) { body.homepage .page-banner-wrapper.page-banner-has-video { height: 30vh !important; } } It works! Thanks so much @tuanphan Link to comment
createwithbecks Posted June 12 Share Posted June 12 @tuanphan Hi there - I have tried every custom code in every forum you have replied to for this but none of them work for me. I am trying to have my top video on my homepage not cut off in mobile view on the sides, can you share a custom code that I could try to use for this? https://www.thunderbirdflorida.com Link to comment
Beyondspace Posted June 14 Share Posted June 14 Anyone is interested in using AI Smart cropping the videos so that it can be served with different version automatically? We can achieve that using Cloudinary https://videoapi.cloudinary.com/video-demo/video-smart-cropping but it need to tweak the URL to make it work on SQS background video, drop your Background videos here so we can take a look BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
supermutt Posted June 18 Share Posted June 18 hi all, same as everyone else I here and the bad mobile adaptation of the desktop site. Why Is the formatting for this so difficult? anyway, my background video on desktop for my cover page looks fine and the button stays put, but for mobile it crops it terribly and the button moves around. Just want it the video to stay full between the borders. www.wearesupermutt.com Link to comment
tuanphan Posted June 19 Share Posted June 19 On 6/13/2024 at 2:50 AM, createwithbecks said: @tuanphan Hi there - I have tried every custom code in every forum you have replied to for this but none of them work for me. I am trying to have my top video on my homepage not cut off in mobile view on the sides, can you share a custom code that I could try to use for this? https://www.thunderbirdflorida.com You can use this to Website Tools (under Not Linked) > Custom CSS @media screen and (max-width:767px) { section[data-section-id="663dfb6d72e54f336c20d483"] { video { object-fit: contain !important; } & { min-height: unset !important; height: 25vh !important; } h1 { font-size: 30px !important; margin-bottom: 0px !important; } .html-block { position: relative; top: -50px; }}} 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