background video play using youtube iframe player API

Question

I have used Youtube iframe player API to show playlist and play youtube videos with youtube id in my web application which is built using angular <4, everything is perfect while playing playlist in desktop browser but if I open my web app in mobile browser I am able to play music and watch videos but as soon as I minimize my mobile-browser video gets paused and same when locking mobile devices too. how can I continue to listen to music by playing video in the background by minimizing and locking screen? I have configured my iframe player API like as below

  if (window['onYouTubeIframeAPIReady']) {
    return this.initYoutubePlayer(videoId);
 }

 /**
  * Initiate youtube iframe player.
  */
 private initYoutubePlayer(videoId: string, resolve) {
   this.youtube = new YT.Player('youtube-player', {
    videoId: videoId,
    playerVars: this.getPlayerVars(),
    events: {
        onReady: () => this.onPlayerReady(resolve),
        onError: this.tryToPlayFallbackVideos.bind(this),
        onStateChange: this.onYoutubePlayerStateChange.bind(this)
        }
    });
 }

 /**
  * Handle youtube player state changes.
  */
 private onYoutubePlayerStateChange(e: YT.OnStateChangeEvent) {
    switch (e.data) {
    case YT.PlayerState.ENDED:
        this.state.firePlaybackEnded();
        this.setState('playing', false);
        break;
    case YT.PlayerState.PLAYING:
        this.numberOfTracksSkipped = 0;
        this.setState('playing', true);
        break;
    case YT.PlayerState.PAUSED:
        this.setState('playing', false);
        break;
   }
 }

  /**
  * Get youtube player vars.
  */
 private getPlayerVars(): YT.PlayerVars {
    return {
    autoplay: 0,
    rel: 0,
    showinfo: 0,
    disablekb: 1,
    fs: 0,
    controls: 0,
    modestbranding: 1,
    iv_load_policy: 3,
    playsinline: 1,
   }
 }

is there any way i can play youtube videos in background of web app when opened in mobile browser. any suggestions are highly appreciated.

Guilherme IA Guilherme IA · Accepted Answer · 2020-03-05T14:24:01

Mobile Considerations

Autoplay and Scripted Playback 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). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

Source: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

background video play using youtube iframe player API

1 Answers

Mobile Considerations