Я добавил два видео рядом друг с другом, используя свойство col, но на маленьких экранах оно складывается без пробелов

Question

Видео складываются один под другим без пробелов. Как я могу создать интервал между ними при использовании небольшого устройства

 <div class="row">
    <div class="col-xs-12 col-md-4 col-md-offset-2">
    <div class="embed-responsive embed-responsive-4by3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </div>
    <div class="col-xs-12 col-md-4">
    <div class="embed-responsive embed-responsive-4by3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    </div>
    </div>

Answer 1

1) Вы можете добавить класс .form-group (который даст маржинальное основание 1rem) к вашему div с классом col-xs-12, например:

<div class="row">
  <div class="col-xs-12 col-md-4 col-md-offset-2 form-group">
    <div class="embed-responsive embed-responsive-4by3">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 form-group">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

2) Или вы можете добавьте служебный класс bootstrap spacing подобно классу .mb-2 (который добавляет нижнее поле) к вашему div с классом col-xs-12 следующим образом:

<div class="row">
  <div class="col-xs-12 col-md-4 col-md-offset-2 mb-2">
    <div class="embed-responsive embed-responsive-4by3">
       <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
  <div class="col-xs-12 col-md-4 mb-2">
    <div class="embed-responsive embed-responsive-4by3">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

Answer 2

Вы можете попробовать добавить класс mt-4 для верхнего поля или mb-4 для нижнего поля к столбцам. Как это:

<div class="row">
    <div class="col-xs-12 col-md-4 col-md-offset-2 mt-4">
        <div class="embed-responsive embed-responsive-4by3">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/qLCLvzTGFVM" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>
    <div class="col-xs-12 col-md-4 mt-4">
        <div class="embed-responsive embed-responsive-4by3">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/lR_aZWdxNV8" frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen></iframe>
        </div>
    </div>
</div>