Responsive vimeo video not working

Developer Support CMS Development
1

hi i’m trying to embed a video from vimeo that’s responsive for mobile but when i copy the embed code it pulls in 56% padding? so there’s odd spacing at the top of the page - why does it do this? here is the code:

<div style=“padding:56.25% 0 0 0;position:relative;”><iframe src=“Private Video on Vimeo” style=“position:absolute;top:0;left:0;width:100%;height:100%;” frameborder=“0” webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Then how do i define the size that i want it on the page? But still keep it responsive?

Thanks

Allison

2

Hi Allison try using this code below,

paste the css styles in your .css file and then all you need is the code in the div class embed container

.embed-container { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}

<div class='embed-container'><iframe src='https://player.vimeo.com/video/268380757' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
3

YES! Worked for us. Thanks so much, @jonchim!!