Full Width Video

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?

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!

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.

@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;}

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?

On 11/21/2021 at 1:19 PM, tuanphan said:

Top video or Our Mission video or?

Our Mission video 🙂

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;
}

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

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?

Yes, indeed!

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.)

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

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;
}}

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...

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

@tuanphan i did this too, but still have a white block in the lower part. Could you see whats wrong? Thank you! See pic

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;
}

@tuanphan Thank you, that takes away the white color, but the space is still there. No way to delete the spacing? 

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

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

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?

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!

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? 

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

@tuanphan Yes, thank you! I think this trick appeared on another topic from you so I tried it and it worked out nicely.