CODEWITHSUNDEEP
javascriptyoutube-iframe-api
andershagbard
andershagbard

Reputation: 1137

YouTube iframe API doesn't autoplay

I am having trouble getting YouTube Iframe API to autoplay a video. You can see a part of my code here, and full code in Codepen link below.

<!-- language: lang-js -->
window.onYouTubeIframeAPIReady = function() {
  let player;

  player = new YT.Player('player', {
    height: '200',
    width: '360',
    videoId: videoId,
    suggestedQuality: 'hd720',
    events: {
      'onReady': event => {
        event.target.playVideo();
      }
    },
    playerVars: config
  });
}

See my Codepen

Upvotes: 1

Views: 3098

Answers (2)

Simon
Simon

Reputation: 17

According to google documents, if you run any about 'autoplay' code on mobile device, it won't work.

The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player).

Upvotes: 0

Tiois
Tiois

Reputation: 1559

Autoplay will work only with some requirements. There's a new Autoplay Policy in Chrome : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has added the site to his or her home screen.
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Media Engagement Index (MEI)

The MEI measures an individual's propensity to consume media on a site. Chrome's current approach is a ratio of visits to significant media playback events per origin:

  • Consumption of the media (audio/video) must be greater than 7 seconds.
  • Audio must be present and unmuted.
  • Tab with video is active.
  • Size of the video (in px) must be greater than 200x140.

If you want to make sure that the video will always play, simply mute it.

Upvotes: 2

Related Questions