Full bleed vimeo embed on project pages

Site URL: https://www.davidoscroft.com/

Going round in circles trying to get the Vimeo content to embed edge to edge in this template. Any ideas welcome! 

I'm sure its something simple I'm missing!

Example project shown here – scroll down for Vimeo video appearing REALLY small!

https://www.davidoscroft.com/polo-denim-fall-2019

1 hour ago, MrOscroft said:

Example project shown here – scroll down for Vimeo video appearing REALLY small!

https://www.davidoscroft.com/polo-denim-fall-2019

I am pleased to help, add this css

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

Oh wow thank you SO MUCH! This is GREAT. Amazing community and platform! 

Actually – while this is great, it stretches the embed and as such it is pixellated when the still / cover frame is there. Any idea how this can be helped? 

2 hours ago, MrOscroft said:

Actually – while this is great, it stretches the embed and as such it is pixellated when the still / cover frame is there. Any idea how this can be helped? 

 

I think you can choose the thumbnail image for the video dont you?

Yes that is true but if you look at this page 

https://www.davidoscroft.com/ralph-lauren-x-bitmoji

You will see that the preview image is scaled up from the small thumbnail that was originally there. I feel like it is something deeper in the CSS that dictates the source embed, and then this new wrapper scales THAT

11 hours ago, MrOscroft said:

Yes that is true but if you look at this page 

https://www.davidoscroft.com/ralph-lauren-x-bitmoji

 

You will see that the preview image is scaled up from the small thumbnail that was originally there. I feel like it is something deeper in the CSS that dictates the source embed, and then this new wrapper scales THAT

The thumbnail actually is real small, it not the css issue

Could you add custom thumbnail like so?

Ah okay – will try this!

On 10/27/2020 at 12:51 AM, bangank36 said:

I am pleased to help, add this css

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

Hi, I am looking to do exactly this! What template is this? And is the CSS entered directly in the costum CSS tab? I can't seem to get these results on my current template. As this is the most important aspect of the site, I am happy to go ahead and adjust my template to whichever one works. Thank you so much!

10 minutes ago, MIMD said:

Hi, I am looking to do exactly this! What template is this? And is the CSS entered directly in the costum CSS tab? I can't seem to get these results on my current template. As this is the most important aspect of the site, I am happy to go ahead and adjust my template to whichever one works. Thank you so much!

what is your site url

matthewmaria.com

I am looking to full screen the videos in the project pages like this one: https://www.matthewmaria.com/20th-century-fox-alien-covenant-scares-man-u

Thank you so much!

Just now, MIMD said:

matthewmaria.com

 

I am looking to full screen the videos in the project pages like this one: https://www.matthewmaria.com/20th-century-fox-alien-covenant-scares-man-u

 

Thank you so much!

lol, it's not the same issue with the author, so let's open it on new topic

Sorry, I am new here. How do I do that?

Also, if it makes it easier, I am willing to use the original poster's approach. I have to build a second site and I can use any template that makes these full bleed videos simplest.

Thank you

I keep trying this but I still cannot get the videos to full width from Vimeo. It's on my Project Pages

Here's the page:

https://www.katestudio.com/awesome-burger

On 2/10/2021 at 6:54 AM, katestudio said:

I keep trying this but I still cannot get the videos to full width from Vimeo. It's on my Project Pages

Here's the page:

https://www.katestudio.com/awesome-burger

Add to Awesome Burger Page Header

<style>
  main#page {
    padding-left: 0;
    padding-right: 0;
}
</style>

Hello there, I am hoping to do precisely this! What layout is this? Furthermore, is the CSS entered straightforwardly in the costum CSS tab? I can't get these outcomes on my present layout. As this is the main part of the site, I am glad to feel free to change my layout to whichever one works. Thank you kindly!

Hello, I am trying to get my vimeo video on the below page to be full bleed

https://studio-1.squarespace.com/lit-1

Password: studio1

I tried all of the above and none of it seemed to work for me. I'd also like it to have no padding top or bottom on both desktop and mobile. The current code is a responsive auto-background-play vimeo video.

Here is the code I am using int the block:

<div style="padding:56.25% 0 0 0;position:relative;">
  <iframe src="https://player.vimeo.com/video/560553672?background=1&?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="LIT Reel"> </iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Where do you place this code?

22 hours ago, DouglasWayne said:

Hello, I am trying to get my vimeo video on the below page to be full bleed

https://studio-1.squarespace.com/lit-1

Password: studio1

I tried all of the above and none of it seemed to work for me. I'd also like it to have no padding top or bottom on both desktop and mobile. The current code is a responsive auto-background-play vimeo video.

Add to Design > Custom CSS > Then save & reload the site

/* Video fullwidth */
[data-section-id="60c2c75d358f6c1bb0dd098c"] .content-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

THANK YOU!!!!!!!!!!!!!!!

Hi, 

These code adjustments do not adapt to the theme I am using, when following these steps ^^. 
 

Will you be able to help me out – I need embedded vimeo-videos in full-bleed format. 

The site is: https://carrot-daisy-gf7n.squarespace.com/work/american-portraiture-9kdhw

Code: Test 

I hope you will be able to help. MANY thanks! 

On 7/5/2021 at 8:33 PM, Ary_1998 said:

Hi, 

These code adjustments do not adapt to the theme I am using, when following these steps ^^. 
 

Will you be able to help me out – I need embedded vimeo-videos in full-bleed format. 

The site is: https://carrot-daisy-gf7n.squarespace.com/work/american-portraiture-9kdhw

Code: Test 

 

I hope you will be able to help. MANY thanks! 

 

 

Hi. The url doesn't exist. Can you check it again?