Jump to content

Full bleed vimeo embed on project pages

Recommended Posts

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

image.thumb.png.0ba2e72a780ba0bfd0d8e493b45a3b7e.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

image.thumb.png.dfc34dc0f9c07004b824f42bdb755327.png

Could you add custom thumbnail like so?

image.png.7a5a4cf9deeb62b4ccef3766f94d7cc2.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 weeks later...
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;;
}

image.thumb.png.0ba2e72a780ba0bfd0d8e493b45a3b7e.png

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!

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 2 months later...
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>

 

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
  • 3 months later...

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!

Link to comment
  • 2 weeks later...

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>

 

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

 

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
  • 4 weeks later...
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?

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.