Full Width Video

Site URL: https://a2vmedia.squarespace.com/

Hi - unless I'm missing something, is there not a way to. display a video embed full-width? Following please find a link and password. You'll see we can only put a video in the middle of a page with large width selected - but the client would like it the width of the screen. Any answers would be appreciated!

https://a2vmedia.squarespace.com/

Password is:   password

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

Hi Tuanphan,

I've tried adding  the above CSS injections to my sight individually but with no joy.

I am trying to get the videos on my site full-width also

https://chrisjeeves.com/childrens-charity

Can you please advise? If you need anything further please let me know.

Thanks

On 8/25/2021 at 3:38 PM, ChrisJeeves said:

Hi Tuanphan,

I've tried adding  the above CSS injections to my sight individually but with no joy.

I am trying to get the videos on my site full-width also

https://chrisjeeves.com/childrens-charity

Can you please advise? If you need anything further please let me know.

Thanks

Hi,

You mean red video?

Which template do you use? (See template name at Design > Site Styles > Template Name)

Hi Tuanphan,

Thanks for getting in touch.

The Red video yes, but ideally I'd want full width to apply to all the videos site-wide

The Template is: York

If you need any further info let me know

On 8/27/2021 at 5:53 PM, ChrisJeeves said:

Hi Tuanphan,

Thanks for getting in touch.

The Red video yes, but ideally I'd want full width to apply to all the videos site-wide

The Template is: York

If you need any further info let me know

Your page is not fullwidth, difficult to make specific elements in page fullwidth. Each page will need a different code to make specific video fullwidth (and if you add or remove any blocks on that page, the code will need to update again)

Does your page support Index Page?

I have changed the site design to make it full width (I changed the site Outer Padding to: "Extra small"), will this help you?

Does your page support Index Page?
I'm not sure what you mean. The York template I am using supports Index page, I found that much out.

If it's easier, I can change my site design to make full width videos easier to enable. let me know how I can help/whta I can do

Thanks for your advice so far

14 hours ago, ChrisJeeves said:

I have changed the site design to make it full width (I changed the site Outer Padding to: "Extra small"), will this help you?

Does your page support Index Page?
I'm not sure what you mean. The York template I am using supports Index page, I found that much out.

If it's easier, I can change my site design to make full width videos easier to enable. let me know how I can help/whta I can do

Thanks for your advice so far

Your site is not fullwidth, so can't make video fullwidth (It will require a lot of code).

Add this to Design > Custom CSS. (still has small padding on left/right)

.project-slide-video-wrapper {
    max-width: 100% !important;
}

Amazing, the videos are now full width!

Thanks for you pateinece and help, much appreciated!

@tuanphan is there a way to globally make all video blocks full width? CSS that will apply ccross the entire site?