Адаптивный дизайн. Несколько видео подряд, как реализовать?

Question

[ElCHABA]

Добрый день. Есть очень распространенный код отображение адаптивного видео на странице:
.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%;
}

Подскажите пожалуйста реализацию кода для адекватного отображения, если в одном блоке .Video находится например 2, 3 , 5 плеера?
В подобном примере, весь контент просто схлопывается под одно видео

Answer 1

[Михаил Горячкин]

Вам надо добавить к каждому блоку с видел оберточку. Вот пример:
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;
}

Получите два видео одно под другим.
Живой пример