Как средствами JS остановить воспроизведение видео с youtube на странице?

Question

[Григорий Д.]

Здравствуйте!

<iframe width="800" height="480" src="https://www.youtube.com/embed/[[*youtube-id]]" frameborder="0" allowfullscreen id="youtube"></iframe>

- так вставлено видео на страницу.

Я хочу чтобы при событии "onclick" по определенным элементам видео на странице останавливалось.

Пожалуйста подскажите как именно реализовать остановку?

Answer 1

[Никита Баев]

Не совсем тривиально, но тем не менее:
В урле загрузки видео добавляете ?enablejsapi=1

src="https://www.youtube.com/embed/[[*youtube-id]]?enablejsapi=1"

Затем останавливаете видео, в нужном вам событии:

document.getElementById('video').contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');

Comments

[Григорий Д.]

Спасибо!

[Григорий Д.]

У вас опечатка: ?enablejsapi=1 - нужно вставить внутрь "".

[Никита Баев]

Григорий Дидус: пофиксил, что-то не заметил.

[sergiofollan]

У меня не срабатывает, вот
И код ставлю на нужное место

[sergiofollan]

<iframe id='Youtube' class='center-block' src='https://www.youtube.com/embed/$YoutubeCode?enablejsapi=1' frameborder='0' allowfullscreen></iframe>

Answer 2

[SusaPusa]

<script>
// Загрузка YouTube IFrame API
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = [];

function initPlayer(iframe) {
  var player = new YT.Player(iframe, {
    events: {
      'onStateChange': function(event) {
        if (event.data === YT.PlayerState.PLAYING) {
          // Пауза для всех других плееров
          players.forEach(function(p) {
            if (p !== event.target) p.pauseVideo();
          });
        }
      }
    }
  });
  players.push(player);
  iframe.dataset.ytInitialized = true;
}

window.onYouTubeIframeAPIReady = function() {
  // Инициализация существующих iframe
  document.querySelectorAll('iframe[src*="youtube.com/embed"]').forEach(iframe => {
    if (!iframe.dataset.ytInitialized) {
      const src = new URL(iframe.src);
      src.searchParams.set('enablejsapi', '1');
      iframe.src = src.toString();
      initPlayer(iframe);
    }
  });

  // Наблюдатель для новых iframe
  new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => {
        if (node.tagName === 'IFRAME' && node.src.includes('youtube.com/embed')) {
          const src = new URL(node.src);
          src.searchParams.set('enablejsapi', '1');
          node.src = src.toString();
          initPlayer(node);
        }
      });
    });
  }).observe(document.body, { childList: true, subtree: true });
};
</script>

DeepSeek написал код который останавливает воспроизведение сразу нескольких видео, играет только одно.