Adaptive design. Several videos in a row, how to implement?

Question

Adaptive design

Good afternoon. There is a very common code for displaying responsive video on a page:
.video {
position: relative;
padding-bottom: 56.25%
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%
height: 100%;
}
Can you please tell me how to implement the code for adequate display, if there are 2, 3, 5 players in one .Video block, for example?
In this example, all content simply collapses under one video.

Answer 1

You need to add a wrapper to each block with a saw. Here is an example:
HTML:

<div class="wrap">
  <div class="video-responsive">
    <iframe width="auto" height="auto" src="http://www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
  </div>
</div>
<div class="wrap">
  <div class="video-responsive">
    <iframe width="auto" height="auto" src="http://www.youtube.com/embed/mRrE8CFkkAg" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

CSS:

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

.wrap {
  position: relative;
  min-width: 300px;
  max-width: 800px;
}

Get two videos one below the other.
Live example