Jump to content

Embedded vimeo video padding top and bottom

Go to solution Solved by tuanphan,

Recommended Posts

I've embedded a Vimeo video using the code below. The padding and scale of the video is perfect on desktop. However, on mobile there is excessive padding added above and below the video. Can I restrict the height of the videos iframe on mobile? 

<iframe src="https://player.vimeo.com/video/994834551?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="2500" height= "635"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen>
}</iframe>

Thanks

Screenshot 2024-08-04 at 5.08.33 PM.png

Screenshot 2024-08-04 at 5.09.12 PM.png

Link to comment
  • Replies 4
  • Views 743
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

14 hours ago, woz716 said:

I've embedded a Vimeo video using the code below. The padding and scale of the video is perfect on desktop. However, on mobile there is excessive padding added above and below the video. Can I restrict the height of the videos iframe on mobile? 

<iframe src="https://player.vimeo.com/video/994834551?autoplay=1&loop=1&autopause=0&background=1&color=ffffff&controls=0&portrait=0" width="2500" height= "635"  frameborder="0" allow="autoplay; fullscreen"  allowfullscreen>
}</iframe>

Thanks

Screenshot 2024-08-04 at 5.08.33 PM.png

Screenshot 2024-08-04 at 5.09.12 PM.png

Can you share your URL?

If your site is not published yet, provide it with a protected password, share it here so we can access your site

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

Link to comment
  • Solution
On 8/5/2024 at 11:18 PM, woz716 said:

Here is an unlinked URL so you can see the current functionality.

 

https://www.jasonwoz.com/test

You can use this to Website Tools > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1722804913696_8929 iframe {
    height: 250px !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.