responsive embed multiple videos next to each other and under each other

问题

I am trying to embed multiple Vimeo videos responsively aside and below each other. When I make use of embed-responsive the videos tend to differ a little in position when I use a couple of different of videos. however when I use the same video in all the divs they align perfectly.

![here a screenshot of the videos not aligning ]1

here is my code

<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>

回答1:

Try this on in your Stylesheet

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

That will change the dimensions for all vimeo embeds.

回答2:

The problem is not with bootstrap. It is because the videos you embed have different size. You should customize the video as explained in this post before using it.

---

There are some issues with the classes you use.

1. Boostrap-4 has removed all of the *-xs-* classes. So col-xs-12 does not exist in the current version of bootstrap. You should use col-12 instead of it.
2. It is enough to use col-sm-6 as it covers all the screens with width more than 576px.

<div class="col-sm-6 col-12 gallery">

来源：https://stackoverflow.com/questions/50681430/responsive-embed-multiple-videos-next-to-each-other-and-under-each-other