This is a theme component that will allow you to add an easy-to-configure persistent Youtube player. Persistent here means that will continue to play as you navigate through different pages in Discourse.
Github repository link
Theme preview: (this is a random Youtube playlist )
Discourse Theme Creator
This component comes with a bunch of settings that you can configure.
the id for the Youtube playlist you’d like to use
Youtube API Key:
For this theme to work you need a Youtube Data API key. There are many tutorials online for how to generate one, but here’s a quick rundown of the process:
Generate a Youtube API KEY
While logged into google. go to
then follow the screenshots below and let me know if you run into any issues here:
Then copy the API key and add it in the theme settings
Choose which side of the screen the player will appear on (left / right)
Determines whether the player will “squeeze” the content when it’s open. This will push the content to the side if there’s enough space for both to display comfortably. If there’s not enough space, or if the setting is not checked, the player will display on top of the page content.
choose any font awesome icon name for the player toggle.
The text for the toggle title that shows on mouse hover
Now playing message
The message text displayed on the thumbnail of the video currently playing.
Disable on Mobile
This component is disabled on mobile by default. However, you are free to enable it. I disabled it by default on mobile scrolling the player list with all the thumbnails is still a bit intense for most average phones out there. However, all the needed layout is there:
I tried to optimise scrolling on mobiles as best as I could, but such high amount of content is bound to choke mobile browsers. I will keep looking for ways to further improve this and I don’t recommend enabling the component on mobiles just yet.
Other things you might want to know:
- When there’s a video playing, the player toggle in the header will change color to indicate that.
- When there’s a video playing, and you click the toggle to hide the player, a small control bar will appear at the bottom of the screen that show the name of the video being player and a few control buttons
How do I install this component?
You install this component just like any other theme. Follow the instructions in the official guide:
Once you’re done, simply add the component to your current theme.