Getting an Embedded YouTube Video to Auto Play and Loop

HtmlCssYoutubeYoutube Api

Html Problem Overview


I am trying to get a basic Youtube video to auto play and auto loop embedded on a page, but I'm having no luck.

<div style="text-align: center; margin: auto"><object type="application/x-shockwave-flash" style="width:1120px; height:630px;" data="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1">
<param name="movie" value="http://www.youtube.com/v/GRonxog5mbw?rel=0&amp;loop=1&amp;autoplay=1&amp;showsearch=0&amp;version=3&amp;showinfo=0&amp;modestbranding=1&amp;fs=1" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
</object></div>

Html Solutions


Solution 1 - Html

YouTubes HTML5 embed code:

<iframe width="560" height="315" src="http://www.youtube.com/embed/GRonxog5mbw?autoplay=1&loop=1&playlist=GRonxog5mbw" frameborder="0" allowfullscreen></iframe>ā€‹

You can read about it here: Link View original content on the Internet Archive project.

Solution 2 - Html

Here is the full list of YouTube embedded player parameters.

Relevant info:

> autoplay (supported players: AS3, AS2, HTML5) Values: 0 or 1. Default > is 0. Sets whether or not the initial video will autoplay when the > player loads. > > loop (supported players: AS3, HTML5) Values: 0 or 1. Default is 0. In > the case of a single video player, a setting of 1 will cause the > player to play the initial video again and again. In the case of a > playlist player (or custom player), the player will play the entire > playlist and then start again at the first video. > > Note: This parameter has limited support in the AS3 player and in > IFrame embeds, which could load either the AS3 or HTML5 player. > 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

Use the URL above in your embed code (append other parameters too).

Solution 3 - Html

All of the answers didn't work for me, I checked the playlist URL and seen that playlist parameter changed to list! So it should be:

> &loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs

So here is the full code I use make a clean, looping, autoplay video:

<iframe width="100%" height="425" src="https://www.youtube.com/embed/MavEpJETfgI?autoplay=1&showinfo=0&loop=1&list=PLvNxGp1V1dOwpDBl7L3AJIlkKYdNDKUEs&rel=0" frameborder="0" allowfullscreen></iframe>

Solution 4 - Html

Had same experience, however what did the magic for me is not to change embed to v.

So the code will look like this...

<iframe width="560" height="315" src="https://www.youtube.com/embed/cTYuscQu-Og?Version=3&loop=1&playlist=cTYuscQu-Og" frameborder="0" allowfullscreen></iframe>

Hope it helps...

Solution 5 - Html

Playlist hack 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>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJustin NewburyView Question on Stackoverflow
Solution 1 - HtmlJamie HaymanView Answer on Stackoverflow
Solution 2 - HtmlSalman AView Answer on Stackoverflow
Solution 3 - HtmlTarikView Answer on Stackoverflow
Solution 4 - Htmlpst tomowoView Answer on Stackoverflow
Solution 5 - HtmlLuHView Answer on Stackoverflow