Сергей delphinpro

Ответ:
Вот готовое решение для открытия модального окна с YouTube видео по клику на кнопку:

<button id="play" data-source="https://www.youtube.com/embed/dQw4w9WgXcQ">Play</button>

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe id="youtube-video" width="560" height="315" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

<style>
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .modal.show {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    position: relative;
    background-color: #fefefe;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
  }
  
  .close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
  }
  
  .close:hover {
    color: #000;
  }
  
  iframe {
    width: 100%;
    aspect-ratio: 16/9;
  }
</style>

<script>
  const playButton = document.getElementById('play');
  const modal = document.getElementById('modal');
  const closeButton = document.querySelector('.close');
  const iframe = document.getElementById('youtube-video');
  
  playButton.addEventListener('click', () => {
    const videoUrl = playButton.getAttribute('data-source');
    iframe.src = videoUrl + '?autoplay=1';
    modal.classList.add('show');
  });
  
  closeButton.addEventListener('click', () => {
    modal.classList.remove('show');
    iframe.src = '';
  });
  
  // Закрытие модального окна при клике вне его
  window.addEventListener('click', (event) => {
    if (event.target === modal) {
      modal.classList.remove('show');
      iframe.src = '';
    }
  });
</script>

Этот код включает:

1. Кнопку Play с атрибутом data-source, содержащим ссылку на YouTube видео
   
2. Модальное окно с iframe для встраивания видео
   
3. Стили для:
   
   • Затемненного фона
     
   • Центрированного модального окна
     
   • Кнопки закрытия
     
   • Адаптивного видео (сохраняет соотношение сторон 16:9)
     
   
   
   
4. JavaScript для:
   
   • Открытия модального окна по клику
     
   • Вставки видео в iframe с автовоспроизведением
     
   • Закрытия модального окна
     
   • Остановки видео при закрытии
     
   
   
   

Вы можете изменить ссылку в data-source на нужное вам YouTube видео. Для получения embed-ссылки на YouTube нажмите "Поделиться" → "Встроить" и скопируйте URL из атрибута src iframe.

Зачем привязка к бутстрапу, если на css вам хватит двух-трех строк кода для описания желаемого?

мобильники - вообще ничего не делаете. Блоки и так уже идут в столбик.

Дальше простой запрос

@media (min-width: 768px) /* ширина по вашему хотению */ {
  .block {  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .yellow {
    grid-column: span 3;
  }
}

Добавить несколько строк своих стилей и не пытаться натянуть сову на глобус.

<div class="my-grid">
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
  <div class="my-cell"></div>
</div>

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  height: 100vh;
}
.my-cell:first-child {
  grid-row: span 2;
}

https://getbootstrap.com/.../modal/#via-javascript
https://getbootstrap.com/.../modal/#methods

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

1. Попытаться разделить ваш макет на 12 колонок и как-то примерно распределить картинки по колонкам.

2. Измерить ширины картинок в вашем макете, перевести их в процентное выражение от общей ширины и потом используя доступные scss-миксины сетки, сгенерировать необходимые классы.

Лично мне оба варианта кажутся совершенно не подходящими для данного случая.
Просто возьмите и сверстайте этот блок на гридах. Bootstrap не запрещает вам использовать собственные css-классы.

Взять и убрать всё

<nav class="navbar">
      <div class="container-fluid">
          <div class="navbar-nav">
            <a class="nav-link" href="#">Н</a>
            <a class="nav-link" href="#">О</a>
            <a class="nav-link" href="#">П</a>
            <a class="nav-link" href="#">Н</a>
          </div>
      </div>
</nav>

Зачем всё это?
Посмотрите на картинку иначе: кнопка просто висит поверх линии.

<hr>
<button>Наверх</button>

button {
  transform: translateY(-50%);
}

В BS не продумано такое поведение. Штатными средствами не решается.
Тут лучше отказаться от дата-атрибутов и вручную через js управлять модалками. То есть, написать небольшой менеджер модалок.

https://getbootstrap.com/docs/5.2/layout/css-grid/
Никак. Сетки в пятом бутстрапе экспериментальные. Вероятно в шестой версии появится что-то адекватное.

так же как и без бутстрапа.

button.addEventListener('click', ()=>{
  input.disabled = !input.disabled;
});

<div>
  <input className="form-control" id="inputFilter" />
  <icon>
</div>

div {
  position: relative;
}

icon {
  position: absolute;  
  right: 0;
  top: 0;
  pointer-events: none;
}