joshroos Posted April 19, 2021 Share Posted April 19, 2021 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 comment
moxxbrands Posted September 16, 2021 Share Posted September 16, 2021 On 4/16/2021 at 1: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? How does one do this? Link to comment
tuanphan Posted September 19, 2021 Share Posted September 19, 2021 On 9/16/2021 at 5:42 PM, moxxbrands said: How does one do this? You mean you can't add 2 videos?? 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
moxxbrands Posted September 20, 2021 Share Posted September 20, 2021 (edited) On 9/19/2021 at 9:25 PM, tuanphan said: You mean you can't add 2 videos?? Yes. Had do I add two video's. One for desktop and mobile. -------------- Code wise. What am I needing to use? So: Desktop shows 9x16 and Mobile shows 4x5. It wasn't resolved in the thread in the end so wanted to ask how do you you actually implement it. Does that make sense? Edited September 20, 2021 by moxxbrands Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 On 9/21/2021 at 5:38 AM, moxxbrands said: Yes. Had do I add two video's. One for desktop and mobile. -------------- Code wise. What am I needing to use? So: Desktop shows 9x16 and Mobile shows 4x5. It wasn't resolved in the thread in the end so wanted to ask how do you you actually implement it. Does that make sense? Hi, Can you duplicate the site & add me as an admin there? I will take a look. Message me to get an email 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
bzabka Posted December 21, 2021 Share Posted December 21, 2021 I also cannot add 2 videos. Thoughts? Link to comment
creedon Posted December 21, 2021 Share Posted December 21, 2021 @bzabka Please see the following. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bzabka Posted December 21, 2021 Share Posted December 21, 2021 @creedon Got it. I have everything ready to go. What do you need from me to receive the code. Many thanks in advance. Link to comment
creedon Posted December 21, 2021 Share Posted December 21, 2021 28 minutes ago, bzabka said: What do you need from me to receive the code. Please post the URL for a page on your site where we can see your issue. Also tell us which video is for desktop and which for mobile. 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. Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/. We can then take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bzabka Posted December 21, 2021 Share Posted December 21, 2021 @creedon www.brianzabka.com The first section should remain on desktop but disappear on mobile. The second section should be all that appears on mobile. Many thanks Link to comment
creedon Posted December 22, 2021 Share Posted December 22, 2021 On 12/21/2021 at 11:06 AM, bzabka said: The first section should remain on desktop but disappear on mobile. Add the following to Design > Custom CSS. @media screen and ( max-width : 767px ) { [data-section-id="61c0e880a53f5926166f0e2a"] { display : none; } } @media screen and ( min-width : 768px ) { [data-section-id="61c222336b6e3f1b34e1e3f5"] { display : none; } } This is for v7.1 and specific to the poster's need. Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
bzabka Posted December 30, 2021 Share Posted December 30, 2021 @creedon It worked. Many thanks for your time and assistance. I really appreciate it. creedon 1 Link to comment
Adam9 Posted January 7, 2022 Share Posted January 7, 2022 On 12/22/2021 at 8:19 PM, creedon said: Add the following to Design > Custom CSS. @media screen and ( max-width : 767px ) { [data-section-id="61c0e880a53f5926166f0e2a"] { display : none; } } @media screen and ( min-width : 768px ) { [data-section-id="61c222336b6e3f1b34e1e3f5"] { display : none; } } This is for v7.1 and specific to the poster's need. Let us know how it goes. Hi @creedon I've used the same code here and updated the CSS with the relevant Data Section ID for both videos, but unfortunately hasn't seemed to work on mine. I also previously tried a code another member posted earlier in this thread, but hasn't worked either. To clarify, i'm hoping to hide the 1st video (in the top section) when viewing on mobile. My site isn't live but can be accessed here: https://flatworm-mackerel-dgm3.squarespace.com/ PW - socialseason Please let me know if you can advise, many thanks. Link to comment
creedon Posted January 7, 2022 Share Posted January 7, 2022 @Adam9 It appears you have several issues going on. First I'm not seeing two page sections. I'm seeing two, what appear to be duplicate, code blocks within one page section. So the code posted here will not work for that. However the general technique of hiding/showing can be applied to blocks but we'd need to know whether you want to manipulate page sections or code blocks. Second the code in the code block appears to be malformed causing a bunch of errors in the page. Here is what I'm seeing. I've tweaked the formatting a bit to make it easier to read. <a href="https://laidbaremusic.com/community"> <img src="https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg" onmouseover="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/6009b3125d3e732c068ae487/1611248408694/COMMUNITY.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg'" > The code is missing a closing anchor tag. I think the code should be... <a href="https://laidbaremusic.com/community"> <img src="https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg" onmouseover="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/6009b3125d3e732c068ae487/1611248408694/COMMUNITY.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5ff5e41a2e5d733729a695b8/t/60b67be84befde1ce9730ba4/1622572009541/COMMUNITY+HOVER.jpeg'" > </a> Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Adam9 Posted January 7, 2022 Share Posted January 7, 2022 Thanks for taking a look @creedon I'm wondering if my link took you to the correct page? The code blocks were actually on a different page where I was trying something else (that you've actually helped me out with!). The two relevant videos are on the Homepage, which I have now added to the Main Navigation to (hopefully) make things clearer. To clarify, I am hoping to display one on Desktop and the other on Mobile. The second video at the moment is just a 'holding' video while I wait and see if this is going to work for me. Thanks again.. Link to comment
creedon Posted January 8, 2022 Share Posted January 8, 2022 @Adam9 The URL < https://flatworm-mackerel-dgm3.squarespace.com/ > you gave me originally is what Squarespace thinks is the home. The second URL you gave me is named home but is not the home page. I looked at the second URL and found that you have a syntax error in your Custom CSS. _______ _______ _______ _______ __ | || || || || | | _ || _ || _ || _____|| | | | | || | | || |_| || |_____ | | | |_| || |_| || ___||_____ ||__| | || || | _____| | __ |_______||_______||___| |_______||__| Line Statement --------------- In 'site custom less': 33 34 } 35 36 https://static1.squarespace.com/sta ... al-season-bookings-dj-girl-cap.png 37 ... https://static1.squarespace.com/static/6171821bf2ba744781ff0025/t/617e7b67 .........^ SyntaxError INCOMPLETE_PARSE Unable to complete parse. That will need to be fixed before we can go further. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
creedon Posted January 11, 2022 Share Posted January 11, 2022 (edited) On 1/7/2022 at 4:47 AM, Adam9 said: but unfortunately hasn't seemed to work on mine. Please try the following. @media screen and ( max-width : 767px ) { [data-section-id="61d5dbdf5bd8f328394d335e"] { display : none; } } @media screen and ( min-width : 768px ) { [data-section-id="61d8299cf4ec2f2d863a15df"] { display : none; } } Also I suggest adding the following code. It can prevent unexpected padding issues when hiding/showing the first page section. Let us know how it goes. Edited January 15, 2022 by creedon Adam9 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
sblacker Posted January 13, 2022 Share Posted January 13, 2022 H there, I have a fullscreen video at the top section of my page, and would like to display a different version (9:16) of the video on mobile. https://indigo-orange-m8b2.squarespace.com/ pw: websitesorted123 Any help appreciated, thank you! Link to comment
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 On 1/13/2022 at 8:53 PM, sblacker said: H there, I have a fullscreen video at the top section of my page, and would like to display a different version (9:16) of the video on mobile. https://indigo-orange-m8b2.squarespace.com/ pw: websitesorted123 Any help appreciated, thank you! Add to Design > Custom CSS > Then save & reload the site /* Mobile video */ @media screen and (max-width:767px) { [data-section-id="6182cc04d1096334c6e6140a"] iframe { width: 100% !important; height: auto !important; left: 0 !important; top: 0 !important; } [data-section-id="6182cc04d1096334c6e6140a"] { min-height: unset !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
sblacker Posted January 17, 2022 Share Posted January 17, 2022 Thank you - much appreciated! Link to comment
Papa_Gee Posted January 25, 2022 Share Posted January 25, 2022 (edited) Hello...I bet you're tired of answering this one! I too need to be able to play a different background video on mobile than the one displayed on desktop. I have duplicated the top section from my homepage, plus I've replaced the background video with one that is portrait (9:16), as someone else was instructed to earlier in the thread. The top one is for desktop ONLY and the bottom one is for mobile ONLY. My site is currently under construction and the URL is: orb-caterpillar-zl6x.squarespace.com The site-wide password is: Pl3as3H3lp Your help will be hugely appreciated. Big thanks in advance! Edited January 25, 2022 by Papa_Gee Link to comment
tuanphan Posted January 26, 2022 Share Posted January 26, 2022 19 hours ago, Papa_Gee said: Hello...I bet you're tired of answering this one! I too need to be able to play a different background video on mobile than the one displayed on desktop. I have duplicated the top section from my homepage, plus I've replaced the background video with one that is portrait (9:16), as someone else was instructed to earlier in the thread. The top one is for desktop ONLY and the bottom one is for mobile ONLY. My site is currently under construction and the URL is: orb-caterpillar-zl6x.squarespace.com The site-wide password is: Pl3as3H3lp Your help will be hugely appreciated. Big thanks in advance! Add to Design > Custom CSS /* hide bottom video on desktop */ @media screen and (min-width:768px) { [data-section-id="61efe46d3429967472ec203a"] { display: none; } } /* hide top video on mobile */ @media screen and (max-width:767px) { [data-section-id="61e82dd26345d74a8f5eccab"] { display: none; } } Papa_Gee 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!) Link to comment
Papa_Gee Posted January 26, 2022 Share Posted January 26, 2022 1 hour ago, tuanphan said: Add to Design > Custom CSS /* hide bottom video on desktop */ @media screen and (min-width:768px) { [data-section-id="61efe46d3429967472ec203a"] { display: none; } } /* hide top video on mobile */ @media screen and (max-width:767px) { [data-section-id="61e82dd26345d74a8f5eccab"] { display: none; } } WOW! That is absolutely amazing. You guys are geniuses. Thanks so much. Link to comment
Papa_Gee Posted January 26, 2022 Share Posted January 26, 2022 Also...While I have you...How do prevent line-breaks from happening in the Navigation bar when on narrower browser screen? Link to comment
tuanphan Posted January 27, 2022 Share Posted January 27, 2022 23 hours ago, Papa_Gee said: Also...While I have you...How do prevent line-breaks from happening in the Navigation bar when on narrower browser screen? Use this CSS nav.header-nav-list { flex-wrap: nowrap; } 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