Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Full Width Video


mdemartin

Question

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

Link to comment
  • Answers 39
  • Created
  • Last Reply

Top Posters For This Question

Recommended Posts

  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Screenshot 2021-03-02 at 11.05.45.png

Screenshot 2021-03-02 at 11.05.31.png

Link to comment
  • 0
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

Screenshot 2021-03-02 at 11.05.45.png

Screenshot 2021-03-02 at 11.05.31.png

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

Link to comment
  • 0
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;
}

image.thumb.png.058efb0aa1208f1b67471dbee48bbc8b.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...