Display YouTube Videos in BrightAuthor

Owned by BrightSign TechDocs
Last updated: Aug 15, 2024
5 min read

BrightSign players that can display HTML5 content can play YouTube videos in an HTML5 State. 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.

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.

Screenshot 2024-04-19 at 2.53.05 PM.png
Image 1: This is a single video
Image 2: This is a playlist (the URL contains list=)

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. Add the current video to the end of the base URL: https://www.youtube.com/embed/y1XxnZA1yiQ

    2. Add ?playlist= to the URL we're constructing: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=

    3. Add the playlist ID, which for a single video, is the video ID again: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ

  3. Add parameters to control the video (for more URL parameters, see YouTube's Player Parameters page):

    1. Add &autoplay=1 to automatically start playing the video without interaction: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=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. The video controls aren't useful in a non-interactive situations, so turn them off by adding &controls=0 to the end: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0&controls=0

    4. Add &loop=1 to loop the video when it reaches the end: https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0&controls=0&showinfo=0&loop=1.

  4. Now add the URL we constructed into BrightAuthor as the URL for an HTML site in File > Presentation Properties, in the HTML Sites tab (see Image 5, below):

    https://www.youtube.com/embed/y1XxnZA1yiQ?playlist=y1XxnZA1yiQ&autoplay=1&rel=0&controls=0&loop=1

  5. Add an HTML5 State with Enable external data and Enable native video plane playback checked (see Image 6, below). Note that BrightAuthor does not know when a YouTube video ends, so if you want it to move to the next state after the video is complete, you will need to set the Time on screen value on a non-interactive HTML5 state, or put a Timeout event on an interactive HTML5 state in order to get it to move to the next item if you do not want the video to loop endlessly or just stay "stuck" at the end of the video.

  6. Publish the presentation. Unless the video is restricted (not all videos can be embedded, and some aren't in a compatible format for our players), your Internet connection is broken, or the player's clock isn't set (prevents HTTPS from working), it should play.

 

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 7, above (https://www.youtube.com/watch?v=Zsqr1HVnuDE&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02)

  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. The current video Id, which appears after the v= and before the following & in the URL. Add the video id: https://www.youtube.com/embed/Zsqr1HVnuDE

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

    3. The playlist Id which is the list parameter that appears after the list= in the URL. Add the playlist id and &list= to the URL: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02

  3. Add parameters to control the video (for more URL parameters, see YouTube's Player Parameters page):

    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 &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&loop=1

  4. Add this URL to BrightAuthor as the URL for an HTML Site in File > Presentation Properties in the HTML Sites tab). See Image 8.

  5. Add an HTML5 State with Enable external data and Enable native video plane playback checked. BrightAuthor does not know when a YouTube playlist ends, so to move to the next state after the playlist is complete, set the Time on screen value on a non-interactive HTML5 state or put a Timeout Event on an interactive HTML5 State to move to the next item and not have the playlist to loop endlessly or be "stuck" at the end of the last video.

  6. Publish the presentation. Unless the video is restricted (not all videos can be embedded, and some aren't in a compatible format for our players), your Internet connection is broken, or the player's clock isn't set (prevents HTTPS from working), it should play.

Other

  • To force subtitles in your YouTube video, add &cc_load_policy=1 in the URL link and disable HWZ (disable the Enable native video plane playback option in the HTML5 State). Video performance may be reduced.

  • Not all YouTube videos are set to allow embedded playback. The content owner has the ability to change that permission.

 

Â