How to show a webpage on your digital signage display – Help Center

Related to SpinetiX ARYA ENTERPRISE

This article explains how to use the Webpage app in SpinetiX ARYA. The hardware-backed Webpage app expands your creative options by allowing you to incorporate web content into a familiar and intuitive content-creation environment.

With the Webpage app, you can display HTML pages containing video, images, text, JavaScript elements, and other dynamic content. A webpage can cover the entire screen or appear as part of a broader screen-content composition.

Tip: The Webpage app is particularly useful for displaying HTML content designed for digital signage—for example, content with a 16:9 aspect ratio that does not require authentication. Examples include menu boards, public transportation feeds, room-reservation screens, publicly accessible KPI dashboards, online video, webcam feeds, and more.

Note: Web content used in professional digital signage has some particular requirements and limitations. For more information, see the HTML Best Practices article.

Using the Webpage app in SpinetiX ARYA
Displaying a YouTube Video

Using the Webpage app in SpinetiX ARYA

Log in to your SpinetiX ARYA account and select CREATE.
Select an existing template project on the Templates page, or start a new project.
Select the Webpage app button () to the right of the canvas.

This adds a Webpage layer containing a placeholder where the webpage will appear. You can resize and reposition the layer as required.
Enter the URL of the webpage you want to display in the URL field.

Warning: The webpage cannot be previewed in the SpinetiX ARYA editor. However, it may still display correctly on the player.

Publish the content to a test player and inspect it on a display or through Live View before deploying it to your audience. For more information, see the HTML Best Practices article.
If necessary, select the desired width of the HTML content from the HTML Content Width drop-down field. By default, the content width matches the actual pixel width of the Webpage layer.

Tip: The HTML Content Width setting is particularly useful when the webpage was not designed specifically for digital signage.

Note: A responsive webpage adjusts its layout according to the width and type of device on which it is displayed.
Arrange the Webpage layer as required. You can place it in front of or behind other layers, resize or reposition it, make it full-screen, or use it as part of a broader composition.

Tip: If the webpage supports anchors, you can append an anchor to its URL to open the page at a particular position. For example: https://example.com/page#section
Publish the project to your player so that the content appears on the display.

Tip: Always visually inspect the HTML content as it appears on the physical display before releasing it to your audience.

▶️ Displaying online video

The Webpage app can display browser-based video content, including video hosted on online platforms such as YouTube and Vimeo.

The method used to embed a video and the available playback options depend on the platform hosting the content. The following procedure applies specifically to YouTube and uses a simple HTML page containing the YouTube embedded player.

Note: The YouTube embed URL and playback parameters shown below are specific to YouTube. They cannot be assumed to work with Vimeo or other online video services.

Displaying a YouTube Video

Instead of entering a YouTube embed URL directly in the Webpage app, create and host an HTML wrapper page as described below. You can then enter the URL of the hosted page in SpinetiX ARYA.

Find the YouTube video ID.

Open the video on YouTube and examine its URL. A standard YouTube video URL has the following format:
```
https://www.youtube.com/watch?v=VIDEO_ID
```
The value following v= is the video ID.

Create the HTML page.

Create a file called, 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&amp;loop=1&amp;autoplay=1&amp;mute=1&amp;controls=0&amp;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 both occurrences of VIDEO_ID with the ID of the video you want to display.

The parameters used in this example have the following effects:

playlist=VIDEO_ID together with loop=1 continuously loops the same video.

autoplay=1 starts playback automatically.

mute=1 starts the video without audio. Change the value to mute=0 if audio is required, and test the resulting behavior on the player.

controls=0 hides the standard YouTube player controls.

rel=0 limits related-video recommendations to videos from the same YouTube channel when recommendations are displayed.

Host the HTML page.

Upload the YouTubeVideo.html file to a web server and make sure that the player can access it through HTTP or HTTPS.

For example:
```
https://yourserver.example.com/YouTubeVideo.html
```
Note: The hosted page must be accessible to the player without authentication.
Add the hosted page to SpinetiX ARYA.

Add a Webpage layer to your project and enter the URL of the hosted HTML page in the URL field.

Resize and position the layer as required. To display the video full-screen, make the layer cover the entire canvas.

Publish the project to your player and verify the playback on the physical display or through Live View.

Note: The player requires an active internet connection because the video is streamed from YouTube.

Tip: For additional technical information, including an example for displaying a YouTube playlist, see How to show YouTube videos on the SpinetiX Wiki.

You can also consult the official YouTube Player Parameters documentation for the currently supported playback options.

Displaying video from other online services

To display video hosted on Vimeo or another online service, use the embedding method and embed code supported by that service. Place the embed code in an HTML page, host the page on a web server, and enter the URL of the hosted page in the SpinetiX ARYA Webpage app.

The video service determines whether a particular video can be embedded and which playback options are available.

Note: YouTube, Vimeo, and similar platforms are third-party services. SpinetiX therefore cannot guarantee that they will continue to offer the same functionality or terms of use. See point 15 (c) of the SpinetiX EULA for more information about third-party services.

Always verify the resulting playback on the physical display before releasing the content to your audience. Playback may depend on the individual video, the video owner's settings, platform policies, or changes introduced by the service over time.

Your webpage content is now ready to appear on your digital display.

Using the Webpage app in SpinetiX ARYA

▶️ Displaying online video

Displaying a YouTube Video

Displaying video from other online services

Comments

Was this article helpful?