How to embed vimeo video with responsive design

Question

I did a lot of research over the internet, but this issue is not the exact same thing. I want to embed a video from vimeo using <iframe> tag. I've also tried this code:

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

<div class="video-responsive">
    <iframe width="420" height="315" src="https://www.vimeo.com" frameborder="0" allowfullscreen></iframe>
</div>

But if you have a big screen, it also getting bigger, and that's not look great. I just want it to just shrink not greater than the provided width and height.

score 12 · Answer 1 · answered Apr 24 '18 at 16:58

12

This works for me. I used bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
      </div>
    </div>

  </body>
</html>

answered Apr 24 '18 at 16:58

Ricardo

1,308
1
10
21

Hi Ricardo. With a little retouch, this is working. However, the video is now not on the center, it is aligning into the left. I tried to use ``/`margin: auto`, but nothings changed. – Blues Clues Apr 25 '18 at 06:42
that's weird because i tested in my server and looks in the center... Where did you put the margin center? – Ricardo Apr 25 '18 at 19:34
Yah, indeed. This suppose to be working now, but doesn't. I wrapped the div *(parent of iframe)* inside of `
`.
– Blues Clues Apr 26 '18 at 00:32
2

I don't see how loading the whole bootstrap CSS library is the most accepted solution. I thought the question was asking for a generic css solution. – Vasilis Tsirimokos Dec 24 '19 at 22:07
sério que você vai usar bootstrap só por conta de uma responsividade de video? – Emerson Thompson Oct 03 '20 at 11:43
1

The question was for Vimeo not YouTube. – frontlinebg Nov 05 '20 at 13:44

score 9 · Answer 2 · edited Jun 20 '20 at 09:12

This is a trick from Bootstrap to create responsive elements that maintain their aspect ratio. In this example I'll use 16:9 as it's a video object, but I've used this to make circles, squares, and all sorts of shapes.

This technique uses a container and the ::before element.

HTML

<div class="video-responsive">
  <iframe class="video-responsive-item" src="..."></iframe>
</div>

The ::before element deserves some attention because it's really what make this work. Changing the padding-top will change your aspect ratio, i.e. 16:9 = 9 / 16 = 56.25%

.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

If you wanted to control the height, then you could just change the width of your .video-responsive container.

CSS

.video-responsive {
  position: relative;
  display: block;
  width: 300px;
  overflow: hidden;
}


.video-responsive::before {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-responsive-item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Works well, if you embed the video from somewhere like a Cms use: `video-responsive > iframe` — Mirko t., Feb 23 '21 at 14:24

score 8 · Answer 3 · answered Apr 25 '18 at 04:20

Try This, It will work with any type of media devices.

.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/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>

Almost correct but it's cutting the video if you shrink it. – Blues Clues Apr 25 '18 at 05:22 — Blues Clues, Apr 25 '18 at 05:22

score 3 · Answer 4 · answered Apr 11 '18 at 08:53

3

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

remove this css add then try

answered Apr 11 '18 at 08:53

pk_tan777

351
1
3

3

You have too many answers. Just edit your one answer then update it. I don't know what is the updated one. – Blues Clues Apr 11 '18 at 08:59

score 2 · Answer 5 · answered Apr 11 '18 at 06:01

2

add css in media query for big size screen like

@media only screen and (min-width: 1600px) {
  .video-responsive {
    padding-bottom: 40%;// whatever you want
    - or -
    give height to this div
  }
}

answered Apr 11 '18 at 06:01

pk_tan777

351
1
3

Can you add a snippet? – Blues Clues Apr 11 '18 at 08:11

score 2 · Answer 6 · answered Apr 25 '18 at 03:03

What you are doing is correct if you want to have a responsive video that always keeps the aspect ratio of the video player.

To your point that it keeps growing up in big resolutions, you can fix this with:

Media query Add a media query for large screens so you can reduce the aspect ratio of the video as suggested in one of the previous answers https://stackoverflow.com/a/49767577/1993956

max-width The other is to add a max-width to your video container if you do care about the aspect ratio of the player.

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
    max-width: 800px;
    margin: 0 auto; 
}

Here's an example: https://codepen.io/jaireina/pen/YLWKvp

Hope that helps.

Almost correct but the padding is destroying the content at the bottom. If I remove the padding, the video is not showing. — Blues Clues, Apr 25 '18 at 06:24
I see what you're saying. It needs a wrapper for some reason. See the updated example https://codepen.io/jaireina/pen/YLWKvp — Jair Reina, Apr 27 '18 at 02:52

score 1 · Answer 7 · answered Apr 11 '18 at 08:34

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media screen and (min-width: 1600px) {
  .video-responsive{
     height: 480px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 767px) {
  .video-responsive{
     height: 360px;
     padding-bottom: 0;
   }
}

@media screen and (min-width: 320px) {
  .video-responsive{
     height: 300px;
     padding-bottom: 0;
   }
}

<div class="video-responsive">
    <iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>
</div>

It's not working. The video, the sizing. And just have a black background in snippet. — Blues Clues, Apr 11 '18 at 08:42

score 1 · Answer 8 · answered Jun 10 '19 at 21:47

I used the solution from this page for Vimeo, and it worked: http://embedresponsively.com

They also have same solutions for responsively embedding YouTube, Dailymotion, Google Maps, Getty Images, and more. You just adapt the css to your project, hopefully this site will keep this up to date for new versions.

score 0 · Answer 9 · answered Apr 25 '18 at 04:22

You have to give media query for it, Whatever max size you have decided just write media w.r.t decided max size. like I have written css media query for screen size which has the minimum width of 1200px

@media screen and (min-width: 1200px) {
  .video-responsive{
    width: 1170px;
  }
}

I hope this will resolved your problem

How to embed vimeo video with responsive design

9 Answers9

HTML

CSS