How to show YouTube videos

Applies to all DSOS players, except HMP300, HMP350, and DiVA. It requires KIOSK Feature Set or higher.

Introduction

This tutorial explains how to embed a YouTube video in a simple web page and include it in an Elementi project for display on compatible DSOS players, such as HMP400/W, iBX410/W, iBX440, and third‑party DSOS players. The web page is typically included directly in the signage project, but an alternative using a web server is also described.

The solution requires the KIOSK Feature Set or higher and is designed for unattended playback, enabling users to integrate YouTube video content seamlessly into their presentations and displays, without additional elements such as comments or related videos, providing a clean viewing experience for your audience.

Hare are some examples of videos that could be used:

Requirements

Elementi 2020 or later
Digital signage player (HMP400/W, iBX410/W, iBX440) with KIOSK Feature Set or higher
Active internet access (YouTube content is streamed)
Basic knowledge of HTML

Tutorial for one video

Step 1: Get the YouTube video ID

Open the YouTube video in your browser.
Check out the URL shown in the address bar. It should look like this: https://www.youtube.com/watch?v=hJg4sY2vMS0
The ID of the video is a string passed through the v parameter. For the URL above, the video ID is hJg4sY2vMS0.

Step 2: Create a web page

Create a new file, for example YouTubeVideo.html, and add the following content:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>SpinetiX YouTube Video</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: black;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>

<body>
  <iframe
    src="https://www.youtube-nocookie.com/embed/VIDEO_ID?playlist=VIDEO_ID&loop=1&autoplay=1&mute=1&controls=0&rel=0"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>
</body>

</html>

Replace VIDEO_ID (twice) with the actual ID of your YouTube video.

Check the rest of the parameters in the src attribute and make changes if needed.

playlist=VIDEO_ID and loop=1
Ensure the continuous looping of the same video.
autoplay=1
Starts the playback automatically.
mute=1
Mutes the audio as it might not be needed or interfere with other content; use mute=0 to keep the audio on
controls=0
Hides the player controls.
rel=0
Prevents related videos from being shown.

Step 3: Include the web page in the project

The web page created above is typically included directly in the signage project, to ensure that the web page is deployed together with the project and does not depend on an external web server.

The following are done in Elementi:

Create a new Elementi project or open an existing one.
Import the YouTubeVideo.html file into your project. Skip this step if the page is hosted on a web server.
Add a Web Page layer using the dedicated button from the toolbar.
In the URI field, enter YouTubeVideo.html .
Click the 🆗 button.
Click the “Fit Screen” on the toolbar if you want to make the video full screen.
Click the button to fine-tune the layer properties, if needed.
- If you want to hide the page scroll bar, go to Layer Properties → Advanced tab, add the spx:scrollbar attribute, and set it to hidden or disabled.
Save your project and publish it to your player.

Alternative: Serve the page from a web server

If the YouTubeVideo.html file must be shared across multiple projects or updated centrally, you can host it on a web server.

In this case:

Upload YouTubeVideo.html file to your web server.
Make sure the player has access to it via HTTP or HTTPS.
In your project, set the URI of the Web Page layer to the path to the file on the web server (e.g., https://yourserver.example.com/YouTubeVideo.html).

Tutorial for playlist of videos

Step 1: Get the YouTube playlist ID

Open the YouTube playlist on in your browser.
Check out the URL shown in the address bar. It should look like this: https://www.youtube.com/playlist?list=PLFDucz8JzDGWUwC0WKsZpiQVfpq1Ds2ZG
The ID of the playlist is a string passed through the list parameter. For the URL above, the playlist ID is PLFDucz8JzDGWUwC0WKsZpiQVfpq1Ds2ZG.

Step 2: Create a web page

Create a new file, for example YouTubePlaylist.html, and add the following content:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>SpinetiX YouTube Playlist</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background: black;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
</head>

<body>
  <iframe
    src="https://www.youtube-nocookie.com/embed/videoseries?list=PLAYLIST_ID&autoplay=1&mute=1&loop=1&controls=0&rel=0"
    title="YouTube video player" frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin" 
    allowfullscreen></iframe>
</body>

</html>

Replace PLAYLIST_ID with the actual ID of your YouTube playlist. Note that the link is slightly different than then one for a single video.

Check the rest of the parameters in the src attribute and make changes if needed. See more details above.

Step 3: Include the web page in the project

See above.

Introduction

Requirements

Tutorial for one video

Step 1: Get the YouTube video ID

Step 2: Create a web page

Step 3: Include the web page in the project

Tutorial for playlist of videos

Step 1: Get the YouTube playlist ID

Step 2: Create a web page

Step 3: Include the web page in the project

See also