Jaredhci Posted September 18, 2021 Posted September 18, 2021 Site URL: https://www.harriscomposites.com Good evening! We had some professional videos done of our company and we are starting to fill them into the site…. If you go to the home page and the about me page both videos are cropping in extremely hard to the point you can’t tell what’s going on in the about me. obviously they look great on desktop it’s the mobile that’s the issue. Any solutions? thank you!
tuanphan Posted September 19, 2021 Posted September 19, 2021 On 9/18/2021 at 9:45 AM, Jaredhci said: Site URL: https://www.harriscomposites.com Good evening! We had some professional videos done of our company and we are starting to fill them into the site…. If you go to the home page and the about me page both videos are cropping in extremely hard to the point you can’t tell what’s going on in the about me. obviously they look great on desktop it’s the mobile that’s the issue. Any solutions? thank you! Try adding to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="60d083df2a1ec1090d433780"] { min-height: unset !important; height: 35vh !important; } [data-section-id="60d083df2a1ec1090d433780"] video { object-fit: contain !important; } } This code for homepage 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!)
Jaredhci Posted September 20, 2021 Author Posted September 20, 2021 1 hour ago, tuanphan said: Try adding to Design > Custom CSS @media screen and (max-width:767px) { [data-section-id="60d083df2a1ec1090d433780"] { min-height: unset !important; height: 35vh !important; } [data-section-id="60d083df2a1ec1090d433780"] video { object-fit: contain !important; } } This code for homepage Thank you so much! this works great for the home page. Would you have a fix for the about me section and getting it to be better? Thank you for the help
am2288 Posted September 20, 2021 Posted September 20, 2021 (edited) Site URL: https://tarpon-clementine-aswg.squarespace.com/ Hi there! Video background is great on desktop but the mobile crop is terrible. Anyone with any code or tips that could help? https://tarpon-clementine-aswg.squarespace.com/ Password: 123 Any help would be greatly appreciated! Thank you 🙂 Edited September 21, 2021 by am2288 changed issue
tuanphan Posted September 21, 2021 Posted September 21, 2021 23 hours ago, Jaredhci said: Thank you so much! this works great for the home page. Would you have a fix for the about me section and getting it to be better? Thank you for the help Use this new code @media screen and (max-width:767px) { [data-section-id="60d083df2a1ec1090d433780"], [data-section-id="613fa9bdd4318639512a8d04"] { min-height: unset !important; height: 35vh !important; } [data-section-id="60d083df2a1ec1090d433780"] video, [data-section-id="613fa9bdd4318639512a8d04"] video { object-fit: contain !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!)
MorganePinet Posted September 21, 2021 Posted September 21, 2021 Hello, I would like to apply this code to my main home page video. I have tried these codes but unfortunately it's not working for my website. Could you please tell me what can I do ? https://www.mademoisellemorgane.com.au/ Thank you !!
tuanphan Posted September 22, 2021 Posted September 22, 2021 On 9/21/2021 at 2:55 AM, am2288 said: Site URL: https://tarpon-clementine-aswg.squarespace.com/ Hi there! Video background is great on desktop but the mobile crop is terrible. Anyone with any code or tips that could help? https://tarpon-clementine-aswg.squarespace.com/ Password: 123 Any help would be greatly appreciated! Thank you 🙂 Hi, 123 is incorrect password 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!)
tuanphan Posted September 24, 2021 Posted September 24, 2021 On 9/21/2021 at 8:02 AM, MorganePinet said: Hello, I would like to apply this code to my main home page video. I have tried these codes but unfortunately it's not working for my website. Could you please tell me what can I do ? https://www.mademoisellemorgane.com.au/ Thank you !! Try this new code @media screen and (max-width:767px) { body.homepage article section:first-child { min-height: unset !important; height: 35vh !important; margin-top: 20vh; } body.homepage article section:first-child video { object-fit: contain !important; } } MorganePinet 1 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!)
tuanphan Posted September 28, 2021 Posted September 28, 2021 On 9/25/2021 at 8:06 AM, MorganePinet said: Amazing ! thank you for your help ! Just a suggestion. The FAQ link in footer, link to 404 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!)
MorganePinet Posted September 30, 2021 Posted September 30, 2021 (edited) Thank you for letting me know ! All fixed ! Edited September 30, 2021 by MorganePinet
VisuaGroup Posted January 7, 2022 Posted January 7, 2022 Site URL: https://visuatest.squarespace.com/ Hi, I'm having issues with the header hiding 1/3 of the background video on my home page. I try using padding and margin, but the distance of the padding or the margin is noticeable when I move to the mobile version. I would like the header to not crop the video, but also I want the video to be resized depending on the display size; because at the moment, the video will be cropped depending if is in the pc or mobile version.
tuanphan Posted January 8, 2022 Posted January 8, 2022 What is password? 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!)
tuanphan Posted January 10, 2022 Posted January 10, 2022 On 1/8/2022 at 8:28 PM, VisuaGroup said: Visua It looks like you solved by adding a blank section above video, then set that section height to lower value? 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!)
VisuaGroup Posted January 10, 2022 Posted January 10, 2022 Yes, but the problem is the video will not resize to a different display show. For example, when you view from mobile the video will be cut 3/4 of the view size. Or when you minimize the web page the video will be cropped. Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the full view video with that specific section height? Thank You!
VisuaGroup Posted January 10, 2022 Posted January 10, 2022 Yes, but the problem is the video will not resize to different display show for example; when you view from mobile the video will be cut 3/4 of the view size. Or when you Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the view of the video full with that specific section height?
tuanphan Posted January 12, 2022 Posted January 12, 2022 On 1/11/2022 at 4:44 AM, VisuaGroup said: Yes, but the problem is the video will not resize to different display show for example; when you view from mobile the video will be cut 3/4 of the view size. Or when you Also, I want to ask if is possible. I want the banner with the section height at medium without cropping the lower and upper video. Is there a way to resize the view of the video full with that specific section height? To resize video on mobile, add to Design > Custom CSS /* resize video mobile */ @media screen and (max-width:767px) { [data-section-id="61d63c0cb059294ab1718460"] video { width: 100% !important; height: auto !important; left: 0 !important; } [data-section-id="61d63c0cb059294ab1718460"] { 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!)
CraftyClown Posted June 11, 2022 Posted June 11, 2022 @tuanphan I am having a similar issue to others here getting video banners to work on mobile without severe crop I have tried using the custom css codes you shared above but I don't seem to be having much luck I will be having a video banner on each page of my site and I wonder if you could recommend coding I can add that enables the videos to display properly on mobile? My page is www.skim-epk.com password = SKIM Thanks in advance
tuanphan Posted June 13, 2022 Posted June 13, 2022 On 6/11/2022 at 9:32 PM, CraftyClown said: @tuanphan I am having a similar issue to others here getting video banners to work on mobile without severe crop I have tried using the custom css codes you shared above but I don't seem to be having much luck I will be having a video banner on each page of my site and I wonder if you could recommend coding I can add that enables the videos to display properly on mobile? My page is www.skim-epk.com password = SKIM Thanks in advance Hi, You mean Skim Video behind the text? 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!)
CraftyClown Posted June 13, 2022 Posted June 13, 2022 10 hours ago, tuanphan said: Hi, You mean Skim Video behind the text? Hi Tuanphan, as you probably noticed I was able to fix most of the issues and now have the video banner (Skim video behind the text) working on desktop and mobile. The only bit I'm now struggling with is having it full bleed as the top gets covered by the site header. Is there a way to have it full bleed and not crop off the top? Do I need to add some padding as CSS code? Thanks
tuanphan Posted June 14, 2022 Posted June 14, 2022 13 hours ago, CraftyClown said: Hi Tuanphan, as you probably noticed I was able to fix most of the issues and now have the video banner (Skim video behind the text) working on desktop and mobile. The only bit I'm now struggling with is having it full bleed as the top gets covered by the site header. Is there a way to have it full bleed and not crop off the top? Do I need to add some padding as CSS code? Thanks Add to Design > Custom CSS /* Skim video */ [data-section-id="626e6f20a6ff595d5a7e9c23"] { margin-top: 100px; } @media screen and (max-width:767px) { [data-section-id="626e6f20a6ff595d5a7e9c23"] { margin-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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment