Display YouTube Videos in BA:connected

Owned by BrightSign TechDocs
Last updated: Aug 15, 2024Version comment
4 min read

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.

Screenshot 2024-04-19 at 2.53.05 PM.png
Image1: This is a single video
Image2: 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 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.

    5. 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. 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. 

 

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. 

Other

  • 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. 

Â