> For the complete documentation index, see [llms.txt](https://docs.xibosignage.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xibosignage.com/kb/features/autoplay-embedded-youtube-videos.md).

# Autoplay Embedded YouTube videos

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

{% hint style="warning" %}
Ensure you read and understand YouTube’s terms of service before publishing a Layout or Playlist in Xibo which shows an embedded YouTube video.
{% endhint %}

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

In the **HTML** section, add:

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

In the **Head** section, add:

```auto
<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**

{% hint style="success" %}
An example of a Layout using the above method can be found [here](https://xibo-firmware.fra1.cdn.digitaloceanspaces.com/Example-Layouts/export_youtube-embed-android.zip).
{% endhint %}

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:

```auto
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](https://developers.google.com/youtube/player_parameters), 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.

```auto
<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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.xibosignage.com/kb/features/autoplay-embedded-youtube-videos.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.