Youtube iframe "loop" doesn't work

I tried to use the YouTube player demo to generate the code necessary for my video to autoplay and loop itself. But only the autoplay works, it doesn't loop, and the demo-video doesn't work either. Here is the code I've used.

<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>

Solution 1:

Try adding the playlist parameter along with the loop. For playlist, set it's value as the current video id.

<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
      frameborder="0" allowfullscreen></iframe>

Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:

http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID

Reference:https://developers.google.com/youtube/player_parameters#loop

Solution 2:

Using in react native like this, make sure to use same video ID value for playlist as well.

for e.g if video id is SpongeBOB then url will be like this :

https://www.youtube.com/embed/SpongeBOB?playlist=SpongeBOB&loop=1

below is implementation in react native webview

<WebView
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mediaPlaybackRequiresUserAction={true}
  style={{ height:180, width:300,alignSelf:"center",alignContent:"center"}}
  source={{uri: 'https://www.youtube.com/embed/qD101Xlc5uw?playlist=qD101Xlc5uw&loop=1' }}
 />

Solution 3:

I just figured out you need to have playlist="" to use loop.

<iframe src="https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen>

Solution 4:

'playlist': '<?php echo $youtube_video ?>'

inside playerVars.

For example a full code:

<script>
// 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

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

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height:'100%',
          width: '100%',
          fitToBackground: true,  
          videoId: '<?php echo $youtube_video ?>',
          playerVars: { 
              'autoplay': 1, 
              'controls': 0,
              'autohide':1,
              'enablejsapi':1,
              'loop':1, 
              'disablekb':1, 
              'fs': 0, 
              'modestbranding': 0, 
              'showinfo': 0, 
              'color': 'white', 
              'theme': 'light', 
              'rel':0  ,
              'playlist': '<?php echo $youtube_video ?>'
          },
          events: {
            'onReady': onPlayerReady
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
        player.mute();
        player.setVolume(0);
        //player.setSize(1920, 1080);
        player.setLoop(true);
        player.setPlaybackQuality('hd1080');
      }

Your Html code:

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

If you want to keep video in a variable use this:

<?php $youtube_video='C0DPdy98e4c';?>

Solution 5:

Accepted answer didn't work for me either. Working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrap instead of hard-coding it in JS):

<div id="yt-wrap">
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="ytplayer"></div>
</div>

<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
      width: '100%',
      height: '100%',
      videoId: 'VIDEO_ID',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute(); // comment out if you don't want the auto played video muted
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED) {
      player.seekTo(0);
      player.playVideo();
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>