Блог

Есть ли в любом случае в vanilla JS автозапуск видео внутри всплывающего модального окна? Возможно ли это вообще?

У меня есть элемент автозапуска в iframe (думаю, он входит в стандартную комплектацию встроенной ссылки из YT), но мне все равно нужно нажать кнопку воспроизведения, когда появится модальное окно.

Кроме того, когда вы нажимаете play, а затем закрываете modal, видео все еще воспроизводится. Мне еще предстоит найти способ остановить это с помощью чего-либо, кроме обновления (я предполагаю, что это потому, что модальное всегда технически находится на странице, и я просто скрываю его).

Не уверен, нужна ли мне больше информации, чем просто строка, которую я использую для вызова модального в JS, но у меня есть это:

 xmasDayModalTextEl.innerHTML = `<iframe
  width="543"
  height="362"
  src="https://www.youtube.com/embed/VzkVxkiOqGA"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>`
  

Если вам нужен дополнительный код, чтобы получить лучшее представление о том, как все это работает, пожалуйста, дайте мне знать! Я подумал, что это может быть просто так, как я пишу innerHTML!

Приветствия!

YouTube iframe позволяет запускать автозапуск с помощью параметра autoplay=1 URL: <iframe src="https://www.youtube.com/embed/VzkVxkiOqGA?autoplay=1" ...> . Кроме того, вы могли бы сделать это с помощью API JavaScript YouTube.

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

 const modal = document.querySelector('#modal-id');
const iframe = `<iframe ... ></iframe>`;

function showModal() {
  modal.innerHTML = iframe;
}

function hideModal() {
  modal.innerHTML = '';
}