Responsive vimeo video not working

[AllisonAltus]

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="https://player.vimeo.com/video/268380757?title=0&byline=0&portrait=0" 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 

[jonchim · Accepted solution]

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>

[KateBeebe]

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