How to make chrome allow video autoplay?

Question

I found other answers but none of them worked for me. Chrome won't autoplay.

Current code:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/[...]
rel=0&amp;controls=0&amp;showinfo=0&autoplay=1" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>

Does autoplay in firefox but not in chrome. Didn't find any reliable docs.

EDIT (and solution):

Basically, Chrome needs the video to be muted. If muted, it will autoplay.

<video autoplay muted>
   [your sources here]
</video>

Dias Dias · Accepted Answer · 2018-06-04T08:48:33

1 Method. Change autoplay policy in chrome://flags/#autoplay-policy to "No user gesture is required" https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

2 Method. Use script

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

<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);

  function onYouTubeIframeAPIReady() {
    var player;
    player = new YT.Player('player', {
      videoId: '439frli5VbM', // YouTube Video ID
      width: 560, // Player width (in px)
      height: 316, // Player height (in px)
      playerVars: {
        autoplay: 1, // Auto-play the video on load
        controls: 1, // Show pause/play buttons in player
        showinfo: 0, // Hide the video title
        modestbranding: 1, // Hide the Youtube Logo
        loop: 1, // Run the video in a loop
        fs: 0, // Hide the full screen button
        cc_load_policy: 0, // Hide closed captions
        iv_load_policy: 3, // Hide the Video Annotations
        autohide: 0 // Hide video controls when playing
      },
      events: {
        onReady: function(e) {
          e.target.mute();
        }
      }
    });
  }

</script>

How to make chrome allow video autoplay?

1 Answers