2

Есть ли возможность убрать все видимые элементы на видео youtube и не давать пользователю, поставить его на паузу?

Читал документацию в итоге набросал такой код, но верхняя плашка, логотип ютуб и пауза всё ещё работают.

 <div id="player"></div>

    <script>
      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 player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '800',
          width: '100%',
          videoId: 'P9ylTV2Bg1A',
          playerVars: {'muted': 1, 'autoplay': 1, 'disablekb': 1 , 'controls': 0, 'iv_load_policy': 0, 'loop': 1, 'showinfo': 0, 'modestbranding': 1},
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange,
          }
        });
      }

      // 4. The API will call this function when the video player is ready.

      function onPlayerReady(event) {
        player.mute();
        event.target.playVideo();
      }


      function onPlayerStateChange(event) {
        if (event.data === YT.PlayerState.ENDED) {
            player.playVideo(); 
        }
      }
    </script>
2
  • В крайнем случае можно конечно попробовать видео вставить локально, но не желательно. Commented 14 февр. 2020 в 2:57
  • Обновил код если у кого-то будет похожая проблема, autoplay не работает если у вас не стоит mute(). Commented 14 февр. 2020 в 5:33

1 ответ 1

2

Вообщем так как видео было высотой на пол блока и шириной на 100% (Черные полосы) пришлось растягивать его через ScaleX, заодно сразу ушла проблема с интерфейсом. Для запрета паузы поставил z-index: -100;


#player{
    transform: scaleX(1.35);
    position: relative;
    z-index: -100;
    // &::before{
    //     content: '';
    //     position: absolute;
    //     top: 0;
    //     bottom: 0;
    //     left: 0;
    //     right: 0;
    // }
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.