responsive embed multiple videos next to each othe

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.

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.
It is enough to use col-sm-6 as it covers all the screens with width more than 576px.