Responsive vimeo video not working

SOLVE
Top Contributor

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 

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

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>
2 Replies 2
Highlighted
Regular Contributor

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>
New Contributor

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

Reply
0 Upvotes