support@brightsign.biz
Note: This article outlines how to display a YouTube playlist on a BrightSign player. For instructions on how to display a single YouTube video on a BrightSign player, refer to this article. If you are unsure whether your URL is for a single video or playlist, refer to this article.
Step-By-Step Instructions
1. Open the YouTube video or playlist you wish to display on your player in a web browser on your computer.
2. Locate the URL that is located in the address bar to identify the type of YouTube video. Below is an example of a playlist and it's URL is https://www.youtube.com/watch?v=Zsqr1HVnuDE&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02
3. For the video to be playable on a player, we need to extract a few elements from the URL. First, we need the ID of the video, which is a "v" parameter and appears after v= and before & in the URL. For https://www.youtube.com/watch?v=Zsqr1HVnuDE&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02 the video ID is Zsqr1HVnuDE.
4. Locate the ID of the playlist, which is the "list" parameter that appears after the list= in the URL. For https://www.youtube.com/watch?v=Zsqr1HVnuDE&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02 the playlist ID is PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02.
5. The base of the URL that will be given to the player to display the video is https://www.youtube.com/embed/. Add the video ID to the end of the base URL, for example,
https://www.youtube.com/embed/Zsqr1HVnuDE.
6. Add ?listType=playlist to the URL: http://www.youtube.com/embed/Zsqr1HVnuDEk?listType=playlist.
7. Add &list= to the URL: https://www.youtube.com/embed/Zsqr1HVnuDEk?listType=playlist&list=
8. Add the playlist ID: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02
9. A series of parameters need to be added to control the aspects of the video. To automatically start playing the video without interaction, we need to add &autoplay=1: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1.
Note: These steps outline the parameters used for a non-interactive display. Different parameters are needed if you wish to display the video interactively.
10. 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.
11. The video controls aren't useful in non-interactive situations, turn them off by adding &controls=0 to the end: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0&controls=0
12. 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&showinfo=0.
13. To loop the video when it reaches the end add &loop=1: https://www.youtube.com/embed/Zsqr1HVnuDE?listType=playlist&list=PL1QgAgqcnXH_faB-fdX1hYaW1DVoMBC02&autoplay=1&rel=0&controls=0&showinfo=0&loop=1.
14. In BrightAuthor:connected copy and paste the finished URL into a HTML 5 widget (State properties > Source > Site Source).
15. In State Properties > Source > Options ensure that Enable BrightSign javascript, Enable native video playback, and Enable cross domain policy checks are all enabled.
Note: 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.
16. Publish the presentation.
Note: Not all YouTube videos can be embedded, and some aren't in a compatible format for our players.
For more URL parameters, see YouTube's Player Parameters page: https://developers.google.com/youtube/player_parameters
0 Comments