📄 Display YouTube Videos in BA:connected
Sign in

You can embed Youtube URLs into Brightsign Players but it is not an interactive interface, not best for just quickly putting up a Youtube video. tThey must be programmed in the Bright Connect Management Console.

We provide alternate connections for computers, laptops and HDMI devices so you could have a PC or laptop connected to the system and playback Youtube and other content easily. If you'd like to embed a YouTube player in your BrightSign Player, read on...

💡

Display YouTube Videos in BA:connected

Last updated 15 August, 2024


All BrightSign players can display YouTube content using an HTML5 State in BrightAuthor:connected. To do this, you must construct an embedded player URL from the standard YouTube URL for the page. The process is different depending on whether you are playing a single video or a playlist.

Note that not all YouTube videos can be embedded, and some aren't in a compatible format for our players. 

Determining the Link Type


To determine if your link is for a single video or a playlist, check the YouTube URL. If it contains list something, it's a playlist. Otherwise, it's a single video.

Another indicator that it is a playlist is if you can see the playlist name and author listed, and can see shuffle and repeat icons and can add it to the library (see the example image below):


Construct a Single Video URL


  1. Open the YouTube video or playlist in a web browser and find the URL in the address bar, as shown in Image 4, above.

  2. The base URL of the new URL you will construct is https://www.youtube.com/embed/. Add the following elements to that base URL:

    1. Add the video id from the current URL to the end of the new base URL. This appears after the v= in the current URL. For the image above, the video ID is y1XxnZA1yiQ and the link would now be https://www.youtube.com/embed/y1XxnZA1yiQ

    2. Add ?playlist= to the end of the URL. For example, the link would now be https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=

    3. Add the playlist id. This is the same as the video ID for single (not playlist) videos: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ

  3. Add parameters to control the video:
    1. Add &autoplay=1 to automatically start playing the video without interaction: https://www.youtube.com/embed/y1XxnZA1yiQplaylist=y1XxnZA1yiQ &autoplay=1
    2. Add &rel=0 to the end of the URL to eliminate related videos appearing at the end of the video: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0.
    3. Add &controls=0 to turn off video controls as they aren't useful in a non-interactive environment: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0&controls=0.
    4. Add &showinfo=0 so video info and titles are not displayed: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0&controls=0&showinfo=0.

  4. In BrightAuthor:connected State properties > Source > Site Source, paste the new URL into a HTML 5 widget as shown in Image 5, below.

  5. In State Properties > Source > Options, ensure that Enable BrightSign JavaScript objects, Enable native video playback, and Enable cross domain policy checks are all enabled.

  6. BrightAuthor:connected does not know when a YouTube video ends. If you want your presentation to move to a different state after the video is complete, make sure that there is a Timeout Event set to the HTML 5 state. 

  7. Publish the presentation. 


Image 5


Construct a Multiple Video (Playlist) URL


 


  1. Open the YouTube video or playlist in a web browser and find the URL in the address bar, as shown in Image 6 above.

  2. The base URL of the new URL you will construct is https://www.youtube.com/embed/. Add the following elements to that base URL:

    1. Add the video id to the end of the new base URL. The video id appears after v= and before & in the original URL. For the image above, this would be, https://www.youtube.com/embed/Zsqr1HVnuDE.

    2. Add ?listType=playlist to the URL: http://www.youtube.com/embed/Zsqr1HVnuDEk ?listType=playlist.

    3. Add the playlist id, which appears after the list= in the original URL as well as &list=: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02

  3. Add parameters to control the video:

    1. Add &autoplay=1 to automatically start playing the video without interaction: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1.

    2. Add &rel=0 to the end of the URL to eliminate related videos appearing at the end of the video: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0.

    3. Add &controls=0 to turn off video controls as they aren't useful in a non-interactive environment: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0&controls=0

    4. Add &showinfo=0 so video info and titles are not displayed: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0&controls=0&showinfo=0.

    5. Add &loop=1 to loop the video when it reaches the end: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0&controls=0&showinfo=0&loop=1

  4. In BrightAuthor:connected State properties > Source > Site Source, paste the new URL into a HTML 5 widget as shown in Image 5, above.

  5. In State Properties > Source > Options, ensure that Enable BrightSign JavaScript objects, Enable native video playback, and Enable cross domain policy checks are all enabled.

  6. BrightAuthor:connected does not know when a YouTube video ends. If you want your presentation to move to a different state after the video is complete, make sure that there is a Timeout Event set to the HTML 5 state. 

  7. Publish the presentation. 

More Info

  • See YouTube's Player Parameters page for more URL parameters.

  • These steps to create a single or playlist URL outline the parameters used for a non-interactive display. Different parameters are needed if you want to display the video interactively. 


💡

HTML State for Webpage display (Youtube, Facebook, etc)

The HTML5 state allows you to display HTML web pages, including video, image, text, and JavaScript elements. Note that HTML video content will play even if it is embedded in an Image zone. For a full explanation of how to create HTML content for BrightSign players, please see the HTML Development section.

BrightSign models are not designed to be used as general-purpose web browsers. Many web pages have elements that will not display correctly on a BrightSign player. Make sure to thoroughly test a web page before using it as digital signage.

State Properties


  • Name: The name of the HTML5 state

  • Initial State: Select this to make this state the home screen

Source


  • Site Name: Specify a name for the HTML site. The site name must be unique within the presentation.

  • Site Source: Select a source for the HTML site:

    • Components: Display an HTML page that is stored on your BSN Content Cloud network. This option is only available if the Storage Selector is set to BSN.cloud Content. If you need to add the page to your BSN.cloud network, go to the Content tab first.

    • URL: Display an HTML page from a remote URL.

    • Local Site: Include the HTML page with the presentation files. This option is only available if the Storage Selector is set to Local Content. You will be prompted to locate and select the .html file that you wish to display.

Query String (optional): Enter a query string to be appended to the site URL using the following format: "http://www.example.com/over/there?my_query_string".

The URL and Query string fields accept User Variable values. To specify a User Variable, enter the name of the variable between two sets of braces. The variable value can be either standalone ("{{my_variable}}") or part of a static value ("http://www.brightsign.biz/{{my_variable}}"). 

Options


Use the following checkboxes to enable optional, advanced features associated with the webpage:

  • Enable BrightSign JavaScript objects: Enables BrightScript-JavaScript objects for the HTML page.

  • Enable cross domain policy checks: Enables Chromium security checks for cross-origin requests.
      

  • Ignore HTTPS certificate errors: Instructs the state to ignore security errors when connecting to insecure HTTPS hosts. Enabling this feature makes the player insecure; it is not suitable for production environments and should only be used for testing.

  • Enable camera: Enables webpage access to USB cameras connected to the player (access is disabled by default). This allows support for WebRTC applications.

  • Enable mouse and touch events: Enable user interaction with the HTML page (clicking on links, interacting with JavaScript elements, etc.).

  • Display cursor: Displays a cursor whenever a USB mouse is connected to the player.

  • Enable native video playback: Enables HWZ mode on all <video> elements contained within the page. This increases the frame rate and quality of HTML video playback, but can also cause problems with CSS page transforms and other page elements. By default, it will place video on top of all graphics in the presentation and set the view mode of all <video> elements to Scale to Fill.

  • Enable native Chromium video playback: This feature is only available for XC5 players and allows users to use Chromium’s video player instead of BrightSign’s video player that is based on MPV software. Note that some features will only work when using BrightSign’s video player (like synchronization), but for customers trying to play stock websites and not HTML content custom developed for BrightSign, the Chromium video player will act more like Chrome on a desktop.

  • Enable JavaScript console: Enables the Chromium Web Inspector for HTML sites in the presentation. For security reasons, Enable javascript console should only be used in non-production presentations. Make sure to disable JavaScript console before publishing to a production environment. In the Chromium version found in BOS 8.5 and beyond, the JavaScript console will log information in memory even when you are not connected to the inspector. This will consume memory until the player runs out, which will result in a crash.To enable the JavaScript console in BOS 8.5.31 and above, you will need to either:

    • Set the enable_web_inspector registry key (in the "html" section) to enable the JavaScript console (see the "inspector_server" in roHtmlWidget for more information)

    • Enable "Chromium debugging" in the BrightAuthor:connected RDWS (with BrightAuthor:connected version 1.7.11 and above) or the LDWS.

  • Sites from URLs share storage: HTML widgets that display file URLs will share the same storage database.

  • Sites from local disk share storage: In OS 8.2.55.4 and later, HTML widgets that are loaded from HTTP/HTTPS protocols do not share the same local storage database (HTML widgets that are loaded via file protocol act as they did previously). This flag allows HTML widgets loaded via HTTP/HTTPS protocol to share local storage if they are loaded from the same domain.


Using HTML5 States

To add an HTML component to your presentation:

  1. Either select an external website to display, or upload an internal website to the Content Library (by going to the Content drop down and selecting New Component > Upload HTML Site).

  2. Select and drag the HTML widget to your canvas.

  3. You will see a red dot on the widget, which indicates that some State Properties need to be filled in. 

  4. Now connect other events to the HTML State as desired.