Responsive vimeo video not working

SOLVE
AllisonAltus
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 

0 Upvotes
1 Accepted solution

Accepted Solutions
jonchim
Solution
Guide | Diamond Partner

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>





Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

2 Replies 2
jonchim
Solution
Guide | Diamond Partner

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>





Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution

View solution in original post

KateBeebe
Participant

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

0 Upvotes