Full Width Video

Add to Home > Design > Custom CSS

/* fullwidth home video block */
body.homepage #page section:first-child .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

Tuanphan: thank you so much! If you don't mind, I have  a question for you. The video now displays perfectly on desktop full-screen. On the phone, however, there is a white gap between the top navigation and the video - even though I have the section set at a minimum height. Do you think there might be a way to avoid this. I did try to make the section background black, but then on desktop, there is a black bar below the video. Again, thank yo so much.

On 1/4/2021 at 9:17 PM, mdemartin said:

Tuanphan: thank you so much! If you don't mind, I have  a question for you. The video now displays perfectly on desktop full-screen. On the phone, however, there is a white gap between the top navigation and the video - even though I have the section set at a minimum height. Do you think there might be a way to avoid this. I did try to make the section background black, but then on desktop, there is a black bar below the video. Again, thank yo so much.

Add to Custom CSS

/* video white spacing */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605637267221_5526 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

3 hours ago, tuanphan said:

Add to Custom CSS

/* video white spacing */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1605637267221_5526 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

 

My gosh - thank you so much! 

Hello Tuanphan - if I can trouble you for one more thing on this page:

https://a2vmedia.squarespace.com/

(password is -  password)

You will see in the color sections, I have videos staggered left and right of the captions. Is there code so that the videos stack on top of the captions on mobile - not staggered like desktop? Thank you again.

16 hours ago, mdemartin said:

Hello Tuanphan - if I can trouble you for one more thing on this page:

https://a2vmedia.squarespace.com/

(password is -  password)

You will see in the color sections, I have videos staggered left and right of the captions. Is there code so that the videos stack on top of the captions on mobile - not staggered like desktop? Thank you again.

Add this CSS

@media screen and (max-width:767px) {
div#page-section-5fa2cf6388dc94244e9a1121>.row, div#page-section-5fa440691bbd4306420b04a0>.row, div#page-section-5fa4437992162b3d346e5e1d .span-12>.row {
    display: flex;
    flex-direction: column-reverse;
}
}

@tuanphan I would like the video on my home page (right below the text 'Reel 2021') to be full width - But only for mobile devices. Could you please help me out? Here's the url - https://www.madebydot.tv/

10 hours ago, iamraag said:

@tuanphan I would like the video on my home page (right below the text 'Reel 2021') to be full width - But only for mobile devices. Could you please help me out? Here's the url - https://www.madebydot.tv/

Hi.

Your page is not fullwidth. Difficult to make video fullwidth.

Have you finished designing this page yet? If so, I will check and send the code.
Because if you add / remove a block after inserting the code, the code will probably stop working. And it took time-consuming to re-check the code

@tuanphan Yes I have finished designing the page. Would really appreciate it if you could send the code! 

And yes my website isn't full-width and that's fine for all the content. I just want the video to be full width on mobile. 

On 1/24/2021 at 1:58 AM, iamraag said:

@tuanphan Yes I have finished designing the page. Would really appreciate it if you could send the code! 

And yes my website isn't full-width and that's fine for all the content. I just want the video to be full width on mobile. 

Hi. Sorry for the delay. Do you still need help on this?

@tuanphan Yes I still need help with this. I had two questions - 

• Can we make the video on the home page (the one right below 'Reel 2021' full-width ONLY on mobile?
• Is it possible to make ONLY the images/videos full-width on mobile? (It's fine as it is on desktop)

Please let me know.

Hi there,

I'm also having issues getting a video on this page 
https://chipmunk-turbot-3bw7.squarespace.com/guinness of my website to go full width. I've tried various bits of code people have suggested from different forum threads but non seem to work.

Any help would be most appreciated!

Cheers,

Robin.

On 2/27/2021 at 3:15 AM, cupoftea said:

Hi there,

I'm also having issues getting a video on this page 
https://chipmunk-turbot-3bw7.squarespace.com/guinness of my website to go full width. I've tried various bits of code people have suggested from different forum threads but non seem to work.

Any help would be most appreciated!

Cheers,

Robin.

Hi. Add to Design > Custom CSS then save & reload your site

/* Fullwidth video */
[data-section-id="5ff87dd64b2bac145e547fd8"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

Hi Tuanphan,

This almost works, with small, medium size page breaks, the video stays full width, but when I pull out my browser window wide, it brings back the padding.

Please see screen shots attached of the biggest width where the padding is omitted next to the size from which the padding is brought back (the slightly wider browser window). I'm not sure if an additional piece of code is required?

Thanks again for all your help!

Cheers,

Robin

On 3/2/2021 at 6:14 PM, cupoftea said:

Hi Tuanphan,

This almost works, with small, medium size page breaks, the video stays full width, but when I pull out my browser window wide, it brings back the padding.

Please see screen shots attached of the biggest width where the padding is omitted next to the size from which the padding is brought back (the slightly wider browser window). I'm not sure if an additional piece of code is required?

Thanks again for all your help!

Cheers,

Robin

Your site has 1800px width limit.

Add this code to Custom CSS to remove it.

/* video fullwidth */
[data-section-id="5ff87dd64b2bac145e547fd8"] .content-wrapper {
    padding: 0 !important;
    max-width: 100% !important;
}