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 post
  • Answers 16
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

16 answers to 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;
}

 

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

 

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

 

 

Link to post
  • 0

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.

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

 

Link to post
  • 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

 

Link to post
  • 0

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

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

Link to post
  • 0

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

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

 

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

 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...