DrMSacks 0 Share Posted September 26, 2020 I have a YouTube background video that doesn't look great on mobile. Can I use a completely different YouTube video as the background video on mobile? Link to post
0 rwp 299 Solution Share Posted September 27, 2020 @media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07a2ef3145"] { display: none !important; } } DrMSacks and violettag 2 Link to post
0 tuanphan 9,600 Share Posted September 27, 2020 You can add 2 background video, then we can give the code to hide 1 on desktop, hide 1 on mobile Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 DrMSacks 0 Author Share Posted September 27, 2020 That sounds interesting. Site isn't published yet. Not sure how to show what I have unpublished? Link to post
0 rwp 299 Share Posted September 27, 2020 @tuanphan has a link in his signature on how to set the page up to share. Link to post
0 DrMSacks 0 Author Share Posted September 27, 2020 Got it, thanks. https://helicon-pepper-zje7.squarespace.com/config/settings pubby Link to post
0 rwp 299 Share Posted September 27, 2020 Duplicate your section and change the video, once you have this done we can give you the code to only show one of the two, depending on the screen size. Link to post
0 DrMSacks 0 Author Share Posted September 27, 2020 Ok, done. Thanks for the responses so far! Link to post
0 DrMSacks 0 Author Share Posted September 28, 2020 Thanks rwp!! That's awesome!!! On a related note, on that same page, the mobile font isn't exactly how I want it to be. I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue? @media screen and (max-width:640px) { h3 span {font-size: 36px !important;} } Link to post
0 DrMSacks 0 Author Share Posted September 28, 2020 Thanks rwp!! That's awesome!!! Also, how do I do this on more than one page? And on a related note, on that same page, the mobile font isn't exactly how I want it to be. I have this code below in my Custom CSS that does a nice job of reducing the title font for mobile, but it doesn't appear to affect the top 2 words of the title ('South Florida'). Also, that text is within a markdown box, which is perhaps a part of my issue? @media screen and (max-width:640px) { h3 span {font-size: 36px !important;} } Link to post
0 rwp 299 Share Posted September 28, 2020 The South Florida part of the text is not in the span, which is what you targeted with the css. You would need to do: @media screen and (max-width:640px) { h3, h3 span { font-size: 36px !important; } } Link to post
0 DrMSacks 0 Author Share Posted September 28, 2020 Thanks! Is there a way to make 'South Florida' one size, and the rest a different size? Link to post
0 rwp 299 Share Posted September 28, 2020 Sure. The #block will only change Florida, the rest is what you had before. @media screen and (max-width:640px) { #block-yui_3_17_2_1_1600516236805_10107 h3 { font-size: 56px !important; } h3 span { font-size: 36px !important; } } Link to post
0 DrMSacks 0 Author Share Posted September 28, 2020 That doesn't seem to be working for me. This is my whole Custom CSS right now: @media screen and (max-width:640px) { #block-yui_3_17_2_1_1600516236805_10107 h3 { font-size: 56px !important; } h3 span { font-size: 36px !important; } } @media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07a2ef3145"] { display: none !important; } } Link to post
0 rwp 299 Share Posted September 28, 2020 I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background. This will work. Replace this line: #block-yui_3_17_2_1_1600516236805_10107 h3 { With this: #block-a89aabdb6864ee5ef820 h3 { DrMSacks 1 Link to post
0 DrMSacks 0 Author Share Posted September 29, 2020 (edited) And to tempt fate... How could I do the hidden video trick for 2 more pages? Now I have dual video sections on the 'Services' and the 'About' pages. Hoping to make the lower video sections only for mobile. Your code is great, but a bit obtuse for my brain to reverse engineer. Help please thank you! Edited September 29, 2020 by DrMSacks grammar Link to post
0 Space21 0 Share Posted September 29, 2020 Hi I am a complete newbie with no code experience and am having the same issue. I have tried to follow the instructions above but it doesn't seem to be working for me. Can anyone help me please? Link to post
0 rwp 299 Share Posted September 29, 2020 You need to get the data section id for the sectors that you are working with. They are specific to each section. Link to post
0 rba 0 Share Posted February 19 Hello, I'm also trying to do the 2 videos on my homepage and only show 1 for mobile / 1 for desktop. I have those videos ready on the page and just need the custom code -- how do I share a private link for someone to help here? Link to post
0 creedon 816 Share Posted February 19 @rba Please post the URL for your site. If your site is not public please set up a site-wide password, if you've not already done so. Post the password here. Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 joshroos 3 Share Posted April 14 (edited) @creedon @rwp @tuanphan Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. Site is : roosbrothers.com What code is necessary to do so and where should I host the mobile background video? Thanks! Edited April 14 by joshroos Link to post
0 tuanphan 9,600 Share Posted April 15 22 hours ago, joshroos said: @creedon @rwp @tuanphan Trying to do the same thing here, one background video that loads for desktop (this is already on my site) and a different compressed version that loads for mobile. Site is : roosbrothers.com What code is necessary to do so and where should I host the mobile background video? Thanks! You can add 2 videos, then we will give the code to show 1 on desktop, show 1 on mobile. Or if 2 videos make page slowly loading, we can use code to redirect to new page on mobile only? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 joshroos 3 Share Posted April 15 (edited) On 4/15/2021 at 7:41 AM, tuanphan said: You can add 2 videos, then we will give the code to show 1 on desktop, show 1 on mobile. Or if 2 videos make page slowly loading, we can use code to redirect to new page on mobile only? @tuanphan Where should I host the 2nd video? It's on Vimeo, does it need to be embedded into my site? What I am trying to achieve is to have one video (full-res) play on desktop, and the same video (but compressed) so it loads quicker and easier on mobile. Edited Friday at 02:16 PM by joshroos Link to post
0 joshroos 3 Share Posted Monday at 06:53 PM On 4/15/2021 at 9:39 AM, joshroos said: @tuanphan Where should I host the 2nd video? It's on Vimeo, does it need to be embedded into my site? What I am trying to achieve is to have one video (full-res) play on desktop, and the same video (but compressed) so it loads quicker and easier on mobile. @tuanphanany update on how to make this work and where I should host the 2nd video? Link to post
Question
DrMSacks 0
I have a YouTube background video that doesn't look great on mobile.
Can I use a completely different YouTube video as the background video on mobile?
Link to post
Top Posters For This Question
10
8
3
2
Popular Days
Sep 27
7
Sep 28
7
Sep 29
4
Feb 19
2
Top Posters For This Question
DrMSacks 10 posts
rwp 8 posts
joshroos 3 posts
tuanphan 2 posts
Popular Days
Sep 27 2020
7 posts
Sep 28 2020
7 posts
Sep 29 2020
4 posts
Feb 19 2021
2 posts
Popular Posts
rwp
@media screen and (max-width:1024px) { [data-section-id="5f5beacf1cb1680c6b76bcb1"] { display: none !important; } } @media screen and (min-width:1025px) { [data-section-id="5f7104719344cd07
rwp
I fell for my own trick........ It doesn't work because the other section is visible on mobile, for the video background. This will work. Replace this line: #block-yui_3_17_2_1_1600516236805_
25 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment