Как воспроизвести видео YouTube при клике по стороннему элементу в 2021?

Question

[It]

Собственно в интернете много вопросов похожих, но ответы не работают в 2021 году в хроме, который самый популярный сегодня. Прочитал, что в хроме отключен автоплей и включать только отдельно флагами.
Собственно как заставить видео проигрываться при клике по стороннему элементу типа кнопки?
Вот то решение, которое работает только в фаерфоксе - Codepen
В хроме упорно не хочет. Пробовал встраивать и через API, не работает ни в какую.
У кого есть рабочее решение, ну не может же быть, что никто не использует альтернативные картинки-превью для видосов (не через смену превью самого видео в ютубе).
Или ткните ссылкой на решения, те, что нашел сам и проверил - не работают. И те что в похожем топике тут на хабре тоже.

P.S. И вот вроде как рабочий пример - https://evilcoder.ru/uskorenie-zagruzki-stranic-s-... , но на демо работает, а при добавлении в песочницу или на сайт - нет, почему, хз.

Comments

[godsplane]

У меня работает в хроме кодпен

[volucris1]

https://professorweb.ru/my/html/html5/level3/3_3.php

[It]

godsplane, он достаточно странно работает, в первый раз запускается иногда, но потом перегрузите страницу и попробуйте - работать не будет

[It]

volucris1, спасибо, посмотрю, videojs выглядит не очень ибо он очень большой, на сайте не используется jquery в том числе для уменьшения загружаемых данных, а тут либа огромная только для видосов, как-то не очень. Но за решение спасибо!

[godsplane]

It, перезагружал по 10 раз все работает, но на самом деле у меня недавно была точно такая проблема, но я ее не решил

[It]

godsplane, возможно в хроме включены нужные флаги уже, но это не дефолтные настройки. Я в трех разных хромах пробовал на разных устройствах, не работает. Единственный вариант если замутить видео, тогда воспроизводит, но это не тот результат, который нужен.

Answer 1

[Макс]

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

YouTube.js:

export default class YouTube {

  states = Object.freeze({
    INIT: 'INIT',
    PLAY: 'PLAY',
    PAUSE: 'PAUSE',
  });

  constructor({container, videoId}) {

    this.container = container;
    this.videoId = videoId;
    this.isPlayerReady = false;
    this.initState = this.states.INIT;
    this.resizeTimeout = null;
    this.resizeTimeoutDelay = 500;

    YouTube.addScript();

    YouTube.onYouTubeIframeAPIReady(() => {

      this.player = this.getPlayer();
    });

    $(window).on('resize', () => {

      clearTimeout(this.resizeTimeout);

      this.resizeTimeout = setTimeout(() => {

        this.setDimensions();

      }, this.resizeTimeoutDelay);
    });
  }

  setDimensions() {

    $.getJSON(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${this.videoId}&format=json`,
      ({width, height}) => {

        const elm = $(this.player.getIframe());
        const elmWidth = elm.width();
        const elmHeight = height * elmWidth / width;

        elm.height(Math.floor(elmHeight));
      });
  }

  isPauseState() {

    return this.states.PAUSE === this.initState;
  }

  isPlayState() {

    return this.states.PLAY === this.initState;
  }

  onPlayerReady() {

    this.isPlayerReady = true;

    if (this.isPauseState())
      this.pause();

    else if (this.isPlayState())
      this.play();

    this.setDimensions();
  }

  play() {

    if (this.isPlayerReady)
      this.player.playVideo();

    this.initState = this.states.PLAY;
  };

  pause() {

    if (this.isPlayerReady)
      this.player.pauseVideo();

    this.initState = this.states.PAUSE;
  };

  getPlayer() {

    return new YT.Player(this.container, {
      videoId: this.videoId,
      width: 945,
      events: {
        'onReady': this.onPlayerReady.bind(this),
      }
    });
  }

  static onYouTubeIframeAPIReady(fn) {

    if (!window.hasOwnProperty('onYouTubeIframeAPIReadyEvents') && !Array.isArray(window.onYouTubeIframeAPIReadyEvents))
      window.onYouTubeIframeAPIReadyEvents = [];

    if (!window.hasOwnProperty('onYouTubeIframeAPIReady') || !window.onYouTubeIframeAPIReady) {

      window.onYouTubeIframeAPIReady = function () {

        for (let i = 0; i < window.onYouTubeIframeAPIReadyEvents.length; i++)
          window.onYouTubeIframeAPIReadyEvents[i]();
      };
    }

    window.onYouTubeIframeAPIReadyEvents.push(fn);
  }

  static addScript() {

    if (!YouTube.isScriptAdded()) {

      const tag = document.createElement('script');

      tag.src = 'https://www.youtube.com/iframe_api';
      const firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      window.youTubeScriptAdded = true;
    }
  }

  static isScriptAdded() {

    return window.hasOwnProperty('youTubeScriptAdded') && window.youTubeScriptAdded;
  }
}

место где надо вешать эвенты на кнопку:

import YouTube from '../../../utils/YouTube';

$(window).on('load', () => {

  const video = $('.video-js');
  const playButton = $('.video_button-js');
  const youTube = new YouTube({
    container: video.get(0),
    videoId: 'ТУТ ВИДЕО ID', // обычно get параметр в ссылке на видео "v=ВИДЕО_ID'"
  });

  
  playButton .on('click', () => {

    youTube.play();
    // youTube.pause();
  });
});

место где должно быть видео:

<div class="video-js"></div>
<div class="video_button-js">Play</div>

Comments

[It]

https://codepen.io/Highlander/pen/Badppyp в хроме не работает(