Autoplay Embedded YouTube videos

Embedding a YouTube video should be done using the Embedded module.

Ensure you read and understand YouTube’s terms of service before publishing a Layout or Playlist in Xibo which shows an embedded YouTube video.

When adding the Embedded widget to a Layout or Playlist, configure the following from the right hand properties panel:

In the HTML section, add:

<!-- BROWSER=edge -->
<div id="player"></div>

In the Head section, add:

<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;
    var playerState = -1;
    var readyCalled = false;
    
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          suggestedQuality: 'hd1080',
          height: '1080',
          width: '1920',
          videoId: 'onldzSzdqlM',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }
    function onPlayerReady(event) {
        readyCalled = true;
        event.target.playVideo();
    }
    function onPlayerStateChange(event) {
        if (readyCalled && playerState === 3 && event.data === -1) {
            setTimeout(function() { player.playVideo(); }, 1000);
        }
        playerState = event.data;
    }
</script>

Make sure you adjust the parameters in the above script to select the video to play and the size it should be shown., by adjusting 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.

We recommended you make sure that Hardware Accelerate web content in the Display Profile assigned to your Display 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.

Additional paramters can be added to the script:

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 are 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.

Autoplay and loop Playlists

There are several ways to achieve this 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>
  function onPlayerReady(event) {
    event.target.loadPlaylist(['a329D581TAw','XCHMbYv70o8','wzQesXhFt_s']);
    event.target.setLoop(true);
  }
</script>

To use the 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

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