tuanphan Posted October 15, 2021 Share Posted October 15, 2021 On 10/13/2021 at 10:57 PM, LoneSpruce said: @tuanphan is there a way to globally make all video blocks full width? CSS that will apply ccross the entire site? I guess above code will work on all pages. If it doesn't work, can you share link to some pages 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
AlexvonHof Posted October 27, 2021 Share Posted October 27, 2021 Hi @tuanphan, this is a great thread and you have been very helpful to a lot of folks. I have a question on the same theme... I would like to make a homepage like this: https://runtnyc.com/runtwork . Basically a series of full width videos with no gaps between them that have some simple text over the top with the project name and link off to project pages. Do you know if there is a good squarespace template to start from for this and then would I be able to apply some of the above code to get it the rest of the way? Cheers! Link to comment
tuanphan Posted October 29, 2021 Share Posted October 29, 2021 On 10/27/2021 at 2:17 PM, AlexvonHof said: Hi @tuanphan, this is a great thread and you have been very helpful to a lot of folks. I have a question on the same theme... I would like to make a homepage like this: https://runtnyc.com/runtwork . Basically a series of full width videos with no gaps between them that have some simple text over the top with the project name and link off to project pages. Do you know if there is a good squarespace template to start from for this and then would I be able to apply some of the above code to get it the rest of the way? Cheers! Hi, I remember SS 7.0 has a template with this feature, but can't remember the name. With SS 7.1 (latest version, any template) you can also achieve this. Use series section to add videos Add text block on each section add text link (or button), then we will give the code to pass button link to whole section link. 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
bonsnod Posted November 19, 2021 Share Posted November 19, 2021 @tuanphan Can you please help me with my homepage - gev.squarespace.com PW: Energy I've used the below code, but still getting padding below the video (desktop) and top & bottom (mobile). [data-section-id="617f34d9a4ae4a75b93f8634"] .content-wrapper {padding: 0 !important;} Link to comment
tuanphan Posted November 21, 2021 Share Posted November 21, 2021 On 11/19/2021 at 7:10 AM, bonsnod said: @tuanphan Can you please help me with my homepage - gev.squarespace.com PW: Energy I've used the below code, but still getting padding below the video (desktop) and top & bottom (mobile). [data-section-id="617f34d9a4ae4a75b93f8634"] .content-wrapper {padding: 0 !important;} Top video or Our Mission video or? 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
bonsnod Posted November 22, 2021 Share Posted November 22, 2021 On 11/21/2021 at 1:19 PM, tuanphan said: Top video or Our Mission video or? Our Mission video 🙂 Link to comment
tuanphan Posted November 23, 2021 Share Posted November 23, 2021 On 11/22/2021 at 12:51 PM, bonsnod said: Our Mission video 🙂 Add to Design > Custom CSS > Then save & reload the site /* Our mission video block */ div#block-yui_3_17_2_1_1635726392692_25307 { padding: 0 !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
lensmens Posted November 26, 2021 Share Posted November 26, 2021 Hi @tuanphan, You have already helped me a lot with code I found on this forum, but I keep on having a problem with the following: I would like to have both Vimeo-videos on this website to play full screen when clicked. (In 7.0 this was possibile by adding a video to a gallery, but I can't seem to make it work in 7.1). Thanks in advance! www.lensmens.be/huwelijksvideo Link to comment
tuanphan Posted November 28, 2021 Share Posted November 28, 2021 On 11/26/2021 at 4:08 PM, lensmens said: Hi @tuanphan, You have already helped me a lot with code I found on this forum, but I keep on having a problem with the following: I would like to have both Vimeo-videos on this website to play full screen when clicked. (In 7.0 this was possibile by adding a video to a gallery, but I can't seem to make it work in 7.1). Thanks in advance! www.lensmens.be/huwelijksvideo You mean Click video >> Show video in fullscreen lightbox? Is this right? lensmens 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
tuanphan Posted November 30, 2021 Share Posted November 30, 2021 On 11/28/2021 at 7:44 PM, lensmens said: Yes, indeed! With this feature, you can consider using Video Lightbox Plugin. (The answer contains an affiliate link, which means I will receive a small commission if you click and buy the plugin according to the link above.) 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
AdamSupra Posted May 18, 2022 Share Posted May 18, 2022 (edited) trying to get my main page video to work properly both for web/tablet/mobile sizes as well. Need it to be full screen width but without any bars on top or bottom of it. Any help is appreciated.www.timelessweddingfilms.com password: weddingday Edited May 18, 2022 by AdamSupra Link to comment
tuanphan Posted May 20, 2022 Share Posted May 20, 2022 On 5/18/2022 at 8:12 AM, AdamSupra said: trying to get my main page video to work properly both for web/tablet/mobile sizes as well. Need it to be full screen width but without any bars on top or bottom of it. Any help is appreciated.www.timelessweddingfilms.com password: weddingday Try adding to Design > Custom CSS @media screen and (max-width:640px) { section.Intro.Intro--has-image iframe { width: 100% !important; height: auto !important; top: 0 !important; left: 0 !important; } section.Intro.Intro--has-image { height: 630px !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
AdamSupra Posted May 21, 2022 Share Posted May 21, 2022 15 hours ago, tuanphan said: Try adding to Design > Custom CSS @media screen and (max-width:640px) { section.Intro.Intro--has-image iframe { width: 100% !important; height: auto !important; top: 0 !important; left: 0 !important; } section.Intro.Intro--has-image { height: 630px !Important; }} So that make the video show the correct size but adds a huge black space above and below... Link to comment
tuanphan Posted May 23, 2022 Share Posted May 23, 2022 On 5/21/2022 at 12:35 PM, AdamSupra said: So that make the video show the correct size but adds a huge black space above and below... Hi, Try adjusting 630px 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
vichallmusic Posted January 30, 2023 Share Posted January 30, 2023 @tuanphan i did this too, but still have a white block in the lower part. Could you see whats wrong? Thank you! See pic Link to comment
tuanphan Posted February 2, 2023 Share Posted February 2, 2023 On 1/30/2023 at 8:30 PM, vichallmusic said: @tuanphan i did this too, but still have a white block in the lower part. Could you see whats wrong? Thank you! See pic To change white, add this in Line 15 body { background-color: black !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
vichallmusic Posted February 3, 2023 Share Posted February 3, 2023 @tuanphan Thank you, that takes away the white color, but the space is still there. No way to delete the spacing? Link to comment
tuanphan Posted February 8, 2023 Share Posted February 8, 2023 On 2/3/2023 at 4:53 PM, vichallmusic said: @tuanphan Thank you, that takes away the white color, but the space is still there. No way to delete the spacing? The content height is shorter than the mobile screen height, so that space will appear. The solution is to increase the top section height, but if the height is increased, the image/video will not be fullsize anymore 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
noblestudio Posted December 15, 2023 Share Posted December 15, 2023 Hello All, I've encountered an annoying problem with a site i'm building. I've uploaded a video to the homepage that needs to span 100% of the height and width of the screen. Not sure if I need to set the section's height to a row count and adjust optically or toggle the "fill screen" function? Either way, when using fill screen/grid there seems to be some white padding that appears when you shrink the screen to adjust. See attached photo. When inspecting this page, it seems the white space is part of the wrapper? Some links that i've positioned to the bottom of the screen don't show up in some mobile devices and need to be scrolled to be seen. The responsive function on single section websites isn't great, I have to say. I can't seem to solve the issue. site: https://chrysalis-carrot-edlx.squarespace.com/ pw: as2023 Any help? 🙏🏼 Cheers! Nabil Link to comment
tuanphan Posted December 17, 2023 Share Posted December 17, 2023 On 12/16/2023 at 12:37 AM, noblestudio said: Hello All, I've encountered an annoying problem with a site i'm building. I've uploaded a video to the homepage that needs to span 100% of the height and width of the screen. Not sure if I need to set the section's height to a row count and adjust optically or toggle the "fill screen" function? Either way, when using fill screen/grid there seems to be some white padding that appears when you shrink the screen to adjust. See attached photo. When inspecting this page, it seems the white space is part of the wrapper? Some links that i've positioned to the bottom of the screen don't show up in some mobile devices and need to be scrolled to be seen. The responsive function on single section websites isn't great, I have to say. I can't seem to solve the issue. site: https://chrysalis-carrot-edlx.squarespace.com/ pw: as2023 Any help? 🙏🏼 Cheers! Nabil The site is private now. Can you check it again? 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
noblestudio Posted December 17, 2023 Share Posted December 17, 2023 Hey @tuanphan I have to keep it private as the domain is linked, try with this link: https://chrysalis-carrot-edlx.squarespace.com/ pw: as2023 Thanks! Link to comment
noblestudio Posted December 18, 2023 Share Posted December 18, 2023 On 12/17/2023 at 9:17 AM, noblestudio said: Hey @tuanphan I have to keep it private as the domain is linked, try with this link: https://chrysalis-carrot-edlx.squarespace.com/ pw: as2023 Thanks! Hi @tuanphan Did you manage to access the site ok? Any luck with this odd white space? Link to comment
tuanphan Posted December 20, 2023 Share Posted December 20, 2023 On 12/18/2023 at 4:46 PM, noblestudio said: Hi @tuanphan Did you manage to access the site ok? Any luck with this odd white space? I see you solved with some 100vh code? It doesn't show white space to me now noblestudio 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
noblestudio Posted January 5 Share Posted January 5 @tuanphan Yes, thank you! I think this trick appeared on another topic from you so I tried it and it worked out nicely. 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