How to add autoplay and a loop to a Youtube video on HTML?

embed youtube video with autoplay, looping, and no controls
html video autoplay loop no controls
youtube embed autoplay not working
youtube embed video
youtube autoplay embed
autoplay video behance
autoplay video on website
how to loop vimeo video

I'm having trouble with adding autoplay to the video I want to put on my HTML site. Adding ?autoplay=1 or &autoplay=1 didn't work. -- same with the loop

<div class="videoContainer">
    <iframe class="videoContainer__video" width="560" height="315" src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen> </iframe>
</div>

Hello my friend you can find the correct steps to embed a youtube video correctly;

  1. On a computer, go to the YouTube video that you want to embed.
  2. Under the video, click Share .
  3. Click Embed.
  4. From the box that appears, copy the HTML code.
  5. Paste the code into your blog or website HTML.

To allow your video to auto play use this src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;controls=0&amp;showinfo=0;autoplay=1&mute=1" as well as having allow="autoplay; encrypted-media" in your code. Use the steps above to embed your video through youtube first and then add the autoplay=1 to your video url.

I know you have said you have tried to add autoplay=1 already but it may help you to retry following my steps. Let me know how you get on.

How to embed a Youtube video into your website (+autoplay/loop) , You will use Youtube Embedded Player Parameters to hide the controls, autoplay, loop and more. Example: http://pacific.gatech.edu. To create a video banner;. Playing a YouTube Video in HTML. To play your video on a web page, do the following: Upload the video to YouTube. Take a note of the video id. Define an <iframe> element in your web page. Let the src attribute point to the video URL. Use the width and height attributes to specify the dimension of the player.

Not relying on parameters that don't seem to work for me – 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>

Embed Youtube Video with Autoplay, Looping, and no controls , Hi All, Recently I have had trouble having a responsive YouTube video which autoplays, loops and has no YouTube controls. I just thought I'd it  Embed Youtube Video with Autoplay, Looping, and no controls! You can use a youtube video as a banner or embedded on your site without any additional modules. You will use Youtube Embedded Player Parameters to hide the controls, autoplay, loop and more.

Here use this: OPEN THE BELOW CODE PEN LINK It will loop your video too : (Runs the cached version of video, look upon @Turnip Comment)

;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg

https://codepen.io/GAUTAMRAJU15/pen/MqLJRa

<iframe class="videoContainer__video" width="560" height="315"     src="https://www.youtube.com/embed/HWl8XAOQnTg?rel=0&amp;&amp;showinfo=0;&autoplay=1;&loop=1;&playlist=HWl8XAOQnTg"> </iframe> 

HTML5 Video Loop Autoplay Using The Video Tag And , YouTube Autoplay. You can have your video start playing automatically when a user visits that page by adding a simple parameter to your YouTube URL. If you’d like your embedded video to autoplay or loop, go to the video you'd like to embed and click the " Share" button in the video player. In the window that opens, click the "Show options" link, and check the corresponding boxes next to "Loop this video," "Autoplay this video," or both. You can then copy the embed code.

How to auto play and auto loop your YouTube Video in a blog or , Since the URL sets the autoplay parameter to 1 , the video would play automatically The HTML and JavaScript code below shows a simple example that inserts a For an IFrame embed, the YouTube video ID for the video that you want to load is Currently, the loop parameter only works in the AS3 player when used in  Here’s how to autoplay an embedded YouTube video. You require very basic code editing skills for this. Go to YouTube and open the video you want to embed. Click on Share and then select the Embed. Copy the HTML code from the box and paste it into the page into the HTML code you would like to add the video to.

How To Set HTML5 Video Autoplay, If you can edit and add HTML codes to your website or post, you can also How to autoplay embedded YouTube videos on your website? 1. In the case of a playlist, this will play the entire playlist and then play it on a loop. When present, it specifies that the video will start over again, every time it is finished. Browser Support The numbers in the table specify the first browser version that fully supports the attribute.

Youtube Embed, 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.

Comments
  • You can no longer autoplay videos with audio in Chrome or Safari. The only way to make this work would be to mute the audio by adding &mute=1 to the URL. jsfiddle.net/vrs2b5yL/2
  • Thank you! It worked out very well. Didn't know Youtube scrapped the "autoplay with audio idea". Other than the video being mute (no issue with that). I love the outcome!
  • @SlappeIk It has nothing to do with YouTube. It is the browser vendors that have implemented the restrictions.
  • @SlappeIk No problem mate but yes Turnips comment is correct it is the Browsers idea, glad i could help
  • Update fromfunction onYouTubePlayerAPIReady() {...} to window.onYouTubePlayerAPIReady = function(){...}
  • Don't have anywhere to test right now. Can anyone else confirm this works? I'll update the answer then.
  • Code above jsfiddle.net/x45ur3kd/1, vs jsfiddle.net
  • This is incorrect this is not the code the OP desires as this will not autoplay. The reason it is auto playing for you is because its working like a cache.
  • @connorg98 can you explain this cache thing ?
  • Sure!! So you cant really autoplay video's anymore and i am not too sure about the reason for this, however because you have created your html autoplay in a codepen and you have already opened the video on the codepen before, your browser remembers this so it will only autoplay for you. If someone else comes to your codepen and presses play, 9 times out of 10 it will autoplay for them every time they refresh.
  • oh i got it , this is due to Turbolinks caching. Even though the auto-video is not visible, it is stored in the cache, and therefore will still play automatically.
  • Yeah you get it :)