Autoplay Embedded Youtube Videos


#1

In 2013, Google prevented Android devices from automatically playing back HTML5 based videos without user interaction.

If you want to embed a Youtube video in Xibo for Android you’ll find it won’t automatically play back, even if you add autoplay=1 to the URL.

Keep in mind that this workaround does not work on every device

To work around this, you can use the following code to make your videos automatically play.

First create an Embedded media type.

In the HTML section, put the following:

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

Then in the script section put the following:

<script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '720',
          width: '1280',
          videoId: 'onldzSzdqlM',
          events: {
            'onReady': onPlayerReady
          }
        });
      }
      function onPlayerReady(event) {
        event.target.playVideo();
      }
</script>

In the script above, you’ll need to adjust the parameters to play the video you want and the size of the region it’s to be shown in.

So carefully adjust the following section:

height: '720',
width: '1280',
videoId: 'onldzSzdqlM',

The height and width are the size to show the video on your actual display. The videoId is from the Youtube URL for that video. So for example if your video’s URL was http://www.youtube.com/watch?v=onldzSzdqlM, the videoId parameter would be onldzSzdqlM

An example of a layout using the above method can be found here:
https://drive.google.com/a/springsignage.com/file/d/0BzRTGkI8DQToNk1PZWFEclRlRmM/view

It is also highly recommended to make sure that “Hardware Accelerate web content” in display profile assigned to your device is set to “On” or “Off when transparent” (if you do not set transparency on the embedded widget), when set to Off player may have problems to display the videos/streams.

There are also additional parameters which can be added to the script, please see below:

player = new YT.Player('player', {
  height: '1080',
  width: '1920',
  videoId: 'XCHMbYv70o8',
 playerVars: { 
   'playlist': 'XCHMbYv70o8',
   'loop': 1,
   'controls' : 0, 
   'rel' : 0,
   'fs' : 0,
   'showinfo' : 0,
   'cc_load_policy' : 0,
   'iv_load_policy' : 3,
   'modestbranding' : 1
  },

playerVars and well explained in the YouTube API Documentation, you can opt to use the ones you want, when we add ‘playlist’ with the same videoId as our video and loop parameter it will cause it to play that video in loop - of course you can add more videos the above is just an example.

Other playerVars in the above example are mostly to remove unnecessary information, captions, controls etc from the embedded YouTube player.

Playlists

Autoplay and loop Playlists.

There are several ways to achieve that using Youtube iframe API, we will focus on loadPlaylist() usage.

The following code will embed a player, load the provided videoIds into a playlist, show all videos in order and then restart and loop the playlists from the beginning.

<script>    

  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
      height: '1080',
      width: '1920',
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  function onPlayerReady(event) {
    event.target.loadPlaylist(['a329D581TAw','XCHMbYv70o8','wzQesXhFt_s']);
    event.target.setLoop(true);
  }
</script>

To use playlist ID of an existing playlist on YouTube, we need to use object syntax to call loadPlaylist().
ie in the above example the loadPlaylist line would need to be replaced with

loadPlaylist({list:'PLYgi4FbOVUSzsP627x-PKTHjoS13_fSJE', listType: 'playlist'});

Youtubevideo with Autoplay does not work :-(
Autoplay youtube on Xibo with autosubtitle, it works already but why?
YouTube Player in the layout
Embedded Youtube - but Muted
Single HTML file
Youtube playlist
Youtubevideo with Autoplay does not work :-(
Youtube video play terribly stuttering only in xibo player
Embedded Youtube video without related videos and with autoplay
How to Livestream?
Webpage display on players
Embedded YouTube Video - Autoplay stops
Youtube don't working well in Android
Youtube playlist
Embed html music player
#2