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.

Ricardo · Accepted Answer · 2018-04-24 16:58:20Z

13

+25

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, 2018 at 16:58

Ricardo

1,3462 gold badges10 silver badges21 bronze badges

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 <center>/margin: auto, but nothings changed.
– Blues Clues
Commented Apr 25, 2018 at 6:42
that's weird because i tested in my server and looks in the center... Where did you put the margin center?
– Ricardo
Commented Apr 25, 2018 at 19:34
Yah, indeed. This suppose to be working now, but doesn't. I wrapped the div (parent of iframe) inside of <div style="margin: auto;">.
– Blues Clues
Commented Apr 26, 2018 at 0: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
Commented Dec 24, 2019 at 22:07
1

The question was for Vimeo not YouTube.
– frontlinebg
Commented Nov 5, 2020 at 13:44

| Show 1 more comment

Delowar Hosain · Accepted Answer · 2018-04-25 04:20:33Z

9

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>

answered Apr 25, 2018 at 4:20

Delowar Hosain

2,3294 gold badges21 silver badges35 bronze badges

Almost correct but it's cutting the video if you shrink it.
– Blues Clues
Commented Apr 25, 2018 at 5:22

Add a comment |

Community · Accepted Answer · 2020-06-20 09:12:55Z

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., Commented Feb 23, 2021 at 14:24

pk_tan777 · Accepted Answer · 2018-04-11 08:53:56Z

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, 2018 at 8:53

pk_tan777

3611 silver badge3 bronze badges

4

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

Add a comment |

pk_tan777 · Accepted Answer · 2018-04-11 06:01:27Z

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, 2018 at 6:01

pk_tan777

3611 silver badge3 bronze badges

Can you add a snippet?
– Blues Clues
Commented Apr 11, 2018 at 8:11

Add a comment |

Jair Reina · Accepted Answer · 2018-04-25 03:03:53Z

2

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.

answered Apr 25, 2018 at 3:03

Jair Reina

2,83525 silver badges20 bronze badges

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

Add a comment |

pk_tan777 · Accepted Answer · 2018-04-11 08:34:44Z

.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, Commented Apr 11, 2018 at 8:42

eyal_katz · Accepted Answer · 2019-06-10 21:47:21Z

1

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.

answered Jun 10, 2019 at 21:47

eyal_katz

1,13110 silver badges17 bronze badges

Add a comment |

Neeraj Rathod · Accepted Answer · 2018-04-25 04:22:13Z

0

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

answered Apr 25, 2018 at 4:22

Neeraj Rathod

1,6374 gold badges19 silver badges25 bronze badges

Add a comment |

Collectives™ on Stack Overflow

How to embed vimeo video with responsive design

9 Answers 9

HTML

CSS

Not the answer you're looking for? Browse other questions tagged
video
responsive-design
vimeo
or ask your own question.

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

HTML

CSS

Not the answer you're looking for? Browse other questions tagged videoresponsive-designvimeo or ask your own question.

Related

Not the answer you're looking for? Browse other questions tagged
video
responsive-design
vimeo
or ask your own question.