danirvin27 Posted July 28, 2020 Share Posted July 28, 2020 Site URL: https://www.danirvin.com/ pw: danspeaks7467 I have an autoplay video in my header that is not resizing when I view it in mobile view here on SquareSpace. Additionally, it is not showing at all on my iOS device and have been testing a backup image, but would prefer the resized video to be autoplaying. Thanks in advance for any help/suggestions/support! :) Dan Attachments: Screenshots from web view and mobile view Link to comment
tuanphan Posted August 3, 2020 Share Posted August 3, 2020 Add to Home > design > Custom CSS /* resize video banner mobile */ @media screen and (max-width:767px) { .homepage #page section:first-child iframe { width: 100% !important; left: 0 !important; height: auto !important; } .homepage #page section:first-child { min-height: 20vh !important; 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
canlooo Posted March 16, 2021 Share Posted March 16, 2021 I'm having the same problem as well and unfortunately the CSS provided above did not work for me. Would be appreciated if there is other solution available. Thanks in advance 🙂 Link to comment
tuanphan Posted March 29, 2021 Share Posted March 29, 2021 On 3/16/2021 at 11:23 PM, canlooo said: I'm having the same problem as well and unfortunately the CSS provided above did not work for me. Would be appreciated if there is other solution available. Thanks in advance 🙂 Each site needs a different code. Can you share link to your site? 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
kappncrim Posted April 2, 2021 Share Posted April 2, 2021 I'm having the same issue with one of my webpages: https://zandragrace.squarespace.com/designwork/astera . Is there also a way to have youtube videos autoplay that doesn't involve having them be background imgs/videos? Link to comment
CQURE Posted May 24, 2021 Share Posted May 24, 2021 my website:https://www.biling1.com/all-products-2 Link to comment
tuanphan Posted May 24, 2021 Share Posted May 24, 2021 1 hour ago, CQURE said: my website:https://www.biling1.com/all-products-2 Add to Design > Custom CSS /* resize video banner mobile */ @media screen and (max-width:767px) { [data-section-id="6059a0f56efca41413e29ba3"] iframe { width: 100% !important; left: 0 !important; height: auto !important; } [data-section-id="6059a0f56efca41413e29ba3"] { min-height: 20vh !important; 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
CQURE Posted May 25, 2021 Share Posted May 25, 2021 15 hours ago, tuanphan said: Add to Design > Custom CSS /* resize video banner mobile */ @media screen and (max-width:767px) { [data-section-id="6059a0f56efca41413e29ba3"] iframe { width: 100% !important; left: 0 !important; height: auto !important; } [data-section-id="6059a0f56efca41413e29ba3"] { min-height: 20vh !important; height: 30vh !important; } } thanks @tuanphan height: 50vh !important; nice!! Link to comment
AshaFajara Posted September 30, 2021 Share Posted September 30, 2021 (edited) The code doesn't work for my site. Can you provide the code for me too? @tuanphan https://www.fajararesidence.com/ Edited September 30, 2021 by AshaFajara Link to comment
tuanphan Posted October 5, 2021 Share Posted October 5, 2021 On 9/30/2021 at 7:00 PM, AshaFajara said: The code doesn't work for my site. Can you provide the code for me too? @tuanphan https://www.fajararesidence.com/ Add to Design > Custom CSS > Then save & reload the site /* resize video */ @media screen and (max-width:767px) { [data-section-id="611bc66452b3c54d5aa08073"] video { width: 100% !important; height: auto !important; } [data-section-id="611bc66452b3c54d5aa08073"] { min-height: unset !important; height: 30vh; } } 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
AshaFajara Posted October 5, 2021 Share Posted October 5, 2021 4 hours ago, tuanphan said: Add to Design > Custom CSS > Then save & reload the site /* resize video */ @media screen and (max-width:767px) { [data-section-id="611bc66452b3c54d5aa08073"] video { width: 100% !important; height: auto !important; } [data-section-id="611bc66452b3c54d5aa08073"] { min-height: unset !important; height: 30vh; } } I tried this but there's a grey block below the video on mobile version now. Link to comment
tuanphan Posted October 7, 2021 Share Posted October 7, 2021 On 10/5/2021 at 7:37 PM, AshaFajara said: I tried this but there's a grey block below the video on mobile version now. Try adjust 30 to another number 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
The-Pilot Posted February 4, 2022 Share Posted February 4, 2022 (edited) Im having same issue @tuanphan mobile background video will not scale. Please can I get CSS code for my site it would be much appreciated. https://www.diamondtravel.club/ Edited February 4, 2022 by The-Pilot incorrect link Link to comment
tuanphan Posted February 7, 2022 Share Posted February 7, 2022 On 2/4/2022 at 8:02 PM, The-Pilot said: Im having same issue @tuanphan mobile background video will not scale. Please can I get CSS code for my site it would be much appreciated. https://www.diamondtravel.club/ Hi. If resize video fullsize, it will create a huge gap below video on mobile. Do you still want to continue? 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
The-Pilot Posted February 8, 2022 Share Posted February 8, 2022 (edited) On 2/7/2022 at 7:39 AM, tuanphan said: Hi. If resize video fullsize, it will create a huge gap below video on mobile. Do you still want to continue? Hi Tuanphan, Thanks for getting back to me yes id still like to resize. A question on that also if possible if i add an extra section underneath the video with different content would that close the gap or will that gap still be visible? Or is it possible to resize just enough just so the text in the video is viewable? Edited February 8, 2022 by The-Pilot added question Link to comment
tuanphan Posted February 18, 2022 Share Posted February 18, 2022 On 2/8/2022 at 11:04 PM, The-Pilot said: Hi Tuanphan, Thanks for getting back to me yes id still like to resize. A question on that also if possible if i add an extra section underneath the video with different content would that close the gap or will that gap still be visible? Or is it possible to resize just enough just so the text in the video is viewable? It create gap because if resize, video height is small, more than device height Add to Design > Custom CSS /* Mobile home top video */ @media screen and (max-width:767px) { body.homepage video { width: 100% !important; left: 0 !important; height: auto !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
jondrees Posted April 3, 2022 Share Posted April 3, 2022 Could you help me out as well @tuanphan? www.dreesperformance.com I'm looking to get the mobile version zoomed out, so the whole video can be displayed. Link to comment
tuanphan Posted April 5, 2022 Share Posted April 5, 2022 On 4/4/2022 at 2:23 AM, jondrees said: Could you help me out as well @tuanphan? www.dreesperformance.com I'm looking to get the mobile version zoomed out, so the whole video can be displayed. Try adding to Design > Custom CSS /* Mobile Homepage Top video */ @media screen and (max-width:767px) { [data-section-id="5e838902c3a88631659acdfb"] video { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } [data-section-id="5e838902c3a88631659acdfb"] { min-height: unset !important; height: 25vh; margin-top: 15vh; }} 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
jondrees Posted April 5, 2022 Share Posted April 5, 2022 Than you that worked @tuanphan! Could you also help me with this page? https://www.dreesperformance.com/volleyball-training Link to comment
tuanphan Posted April 6, 2022 Share Posted April 6, 2022 15 hours ago, jondrees said: Than you that worked @tuanphan! Could you also help me with this page? https://www.dreesperformance.com/volleyball-training Use this new code /* Mobile Homepage Top video */ @media screen and (max-width:767px) { [data-section-id="5e838902c3a88631659acdfb"], [data-section-id="5ff34fa9fc8ee327dd67a5fa"] { video { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } [data-section-id="5e838902c3a88631659acdfb"] { min-height: unset !important; height: 25vh; margin-top: 15vh; }}} 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
jondrees Posted April 9, 2022 Share Posted April 9, 2022 On 4/6/2022 at 1:56 AM, tuanphan said: Use this new code /* Mobile Homepage Top video */ @media screen and (max-width:767px) { [data-section-id="5e838902c3a88631659acdfb"], [data-section-id="5ff34fa9fc8ee327dd67a5fa"] { video { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } [data-section-id="5e838902c3a88631659acdfb"] { min-height: unset !important; height: 25vh; margin-top: 15vh; }}} Thanks @tuanphan that worked for the video, but for some reason, the padding below the video did not crop, like it did for my homepage. It looks like the code is identical. Any idea? Link to comment
tuanphan Posted April 10, 2022 Share Posted April 10, 2022 15 hours ago, jondrees said: Thanks @tuanphan that worked for the video, but for some reason, the padding below the video did not crop, like it did for my homepage. It looks like the code is identical. Any idea? Can you take a screenshot of padding? 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
jondrees Posted April 11, 2022 Share Posted April 11, 2022 On 4/9/2022 at 10:36 PM, tuanphan said: Can you take a screenshot of padding? Link to comment
tuanphan Posted April 13, 2022 Share Posted April 13, 2022 On 4/12/2022 at 12:32 AM, jondrees said: Don't remove any code in your current code. Add this to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5ff34fa9fc8ee327dd67a5fa"] { min-height: unset !important; margin-top: 15vh; height: 25vh; }} 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
jondrees Posted April 13, 2022 Share Posted April 13, 2022 2 hours ago, tuanphan said: Don't remove any code in your current code. Add this to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="5ff34fa9fc8ee327dd67a5fa"] { min-height: unset !important; margin-top: 15vh; height: 25vh; }} 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