July 18

Плеер без возможности перемотки для лендингов

  1. Вставьте библиотеки плеера в код для head страницы в редакторе страницы
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">

2. В тех местах, где нужно инициировать плеер, вставьте код:

<div class="plyr__video-embed" id="player">
  <iframe style="display:none;"
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

Айди ютуб-видео нужно заменить на свой. В примере это bTqVqk7FSmY

Айди ютуб-видео пишется в адресной строке после v=

Айди видео со скриншота — vXYVfk7agqU

3. Вставьте JavaScript-блок с кодом вызова плеера

Код вызова:

const player = new Plyr('#player',{
      youtube: { noCookie: true },
      debug: true,
controls:['play-large', 'play', 'current-time', 'mute', 'volume',  'settings', 'fullscreen']
});

Если нужно вставить более 1 плеера на страницу

В этом случае нужно заменить еще один ID в трех местах. В HTML-коде плеера этот айди нужно заменить в строке id="...

<div class="plyr__video-embed" id="player-2">
  <iframe style="display:none;"
    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
    allowfullscreen
    allowtransparency
    allow="autoplay"
  ></iframe>
</div>

В примере player заменен на player-2

В коде вызова также нужно заменить ID:

const player2 = new Plyr('#player-2',{
      youtube: { noCookie: true },
      debug: true,
controls:['play-large', 'play', 'current-time', 'mute', 'volume',  'settings', 'fullscreen']
});

Заменена переменная const player на const player2, а также заменен айди в селекторе #player на #player-2