Как реализовать запуск видео на сайте по клику видео YouTube/Vimeo на bootstrap?

Question

[zeaovede]

Задача вставить изображение или кнопку на сайте, кликнуть и запустить видео YouTube/Vimeo в модальном окне (промо-ролик). Верстка на сайте на bootstrap. Размещение будет на главной странице сайта, в приоритете лёгкость, плавность, современный внешний вид. Буду благодарен за ваши примеры...

Comments

[maksam07]

в приоритете убрать теги, которые не имеют отношения к вопросу

[Сергей delphinpro]

а у самого-то есть идеи?

[Сергей delphinpro]

самое простое - показываем картинку и вешаем клик на нее. по клику вставляем в страницу video/iframe

[Александр Васильев]

video click modal plugin
Или
video popup plugin
Наверняка индийцы сделали, поищи

[zeaovede]

Сергей delphinpro, да, конечно. Я прошерстил интернет, прежде чем задать вопрос. Но знаете, не нашел прямо того идеального решения.
Вот парочку примеров (надеюсь кому-то пригодится):
https://codepen.io/25virus/pen/BaozeOq - просто классная анимированная кнопка, не завелось на сайте. В совокупности с данной кнопкой хотелось бы иметь изображение. При желании можно интегрировать, но стоит ли оно того...
https://codepen.io/JacobLett/pen/ExmqNLb - Пожалуй самое легкое, что нашлось, легко интегрируется. Если не найду ничего лучше, то буду использовать данное решение
https://azmind.com/bootstrap-tutorial-modal-video/ - красивая кнопка, приятное модальное окно. Решение слишком перегруженное, да и старое в придачу. В плане интеграции на сайт не так все просто, конфликтует c остальными скриптами и стилями, нужно разбираться...

Идеальный пример для этого на сайте eloking:

клац

Будь бы там верстка на бутстрапе, то скопировал к себе на сайт как есть и не парился нисколько

Answer 1

[Сергей 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.