Как на сайте зациклить беззвучное видео с ютуба?

Question

[ligisayan]

Всем привет! Есть фрейм с видео на ютуб, которое хочу зациклить и проигрывать на сайте без звука. Звук в видео убрал согласно документации ютуба, а вот зациклите его не удается несмотря на выставленный параметр loop: 1. В чем причина? Фидл

<div class="videoWrapper">
<div id="player"></div>
</div>
    <script>

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          playerVars: {
          autoplay: 1,
          loop: 1,
          controls: 0,
          showinfo: 0,
          autohide: 1,
          modestbranding: 1,
          vq: 'hd1080'},
          videoId: 'VGz0eoTSNZ8',
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 3. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
      }
    </script>

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper #player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Answer 1

[Максим Тимофеев]

Читаем внимательно документацию:

Примечание. Этот параметр имеет ограниченную поддержку в проигрывателе AS3 и при встраивании IFrame для загрузки проигрывателя AS3 или HTML5. В настоящее время параметр loop работает только в проигрывателе AS3, если он используется в сочетании с параметром playlist. Чтобы закольцевать одно видео, установите для параметра loop значение 1, а для параметра playlist укажите тот же идентификатор видео, что и в URL Player API:

итого:
https://jsfiddle.net/kf7hrLgn/2/

Answer 2

[Петр]

Я бы посоветовал вам использовать HTML5 для видео на сайте.

Вставить довольно просто и так-же легко сделать loop.

И да loop для видео с youtube тут.

Comments

[ligisayan]

Peterko спасибо, но мне нужно, чтобы видео воспроизводилось с ютуба, сразу воспроизводилось, причем без звука, было зацикленным и без лишней панели управления.
причем, ресайзилось под все экраны включая мобильные разрешения и при этом это был кроссбраузерный вариант. - в общем, была как фоновая анимация.
это все позволяет сделать iframe, только вот незадача - пока или видео воспроизводится зацикленным, но со звуком, или без звука, но незацикленным..

[platinum11]

Отличное решение! Мне помогло именно оно

Answer 3

[Fuze]

<div class="videoWrapper">
<div id="player"></div>
</div>
    <script>

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          playerVars: {
          autoplay: 1,
          controls: 0,
          showinfo: 0,
          autohide: 1,
          modestbranding: 1,
          vq: 'hd1080'},
          videoId: 'VGz0eoTSNZ8',
          events: {
            onReady: onPlayerReady,
            onStateChange: function(event){
                if (event.data == YT.PlayerState.ENDED) {
                    player.playVideo();
                }
            }
          }
        });
      }

      function onPlayerReady(event) {
        player.mute();
      }
    </script>

Answer 4

[Артём]