адаптивное встраивание нескольких видео рядом друг с другом и друг под другом - PullRequest
Новая
       43

адаптивное встраивание нескольких видео рядом друг с другом и друг под другом

0 голосов
/ 04 июня 2018

Я пытаюсь втиснуть несколько видео Vimeo в сторону друг от друга.Когда я использую встроенный отзыв, видео имеют тенденцию немного отличаться по положению, когда я использую несколько разных видео.однако, когда я использую одно и то же видео во всех элементах div, они выравниваются идеально.

! [здесь скриншот видео, не выравнивающего] 1

вот мой код 

<section id="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209390725" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/152162621" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/150922044" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209398590" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

Проблема не в загрузке.Это потому, что видео, которые вы вставляете, имеют разный размер.Вы должны настроить видео, как описано в этом посте , перед его использованием.

Есть некоторые проблемы с классами, которые вы используете.

  1. Boostrap-4 удалил все классы *-xs-*.Так что col-xs-12 не существует в текущей версии начальной загрузки.Вы должны использовать col-12 вместо него.
  2. Достаточно использовать col-sm-6, поскольку он охватывает все экраны с шириной, превышающей 576px. 

<div class="col-sm-6 col-12 gallery">
0 голосов
/ 04 июня 2018

Попробуйте это в своей таблице стилей 

iframe[src*=vimeo] {
    width: 100%;
    max-height: 300px;
    height: 100%;
}

Это изменит размеры для всех вложений vimeo.

...