Autoplay Embedded Youtube Videos

Xibo Knowledge Base Xibo for Android
1

Embedding a YouTube video should be done using an embedded widget. Please make sure you read and understand YouTube’s terms of service before publishing a Layout in Xibo which shows an embedded YouTube video.

First create an Embedded Widget.

In the HTML section, put the following:

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

Then in the Head 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;
    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>

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.

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

Playlists

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'});
3 Likes