Discourse Youtube player

theme-component

(Joe) #1

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
https://github.com/hnb-ku/discourse-youtube-player

Theme preview: (this is a random Youtube playlist :wink:)
Discourse Theme Creator


Samples:


Settings:

This component comes with a bunch of settings that you can configure.

Playlist id:
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
https://console.developers.google.com/apis/library/youtube.googleapis.com/

then follow the screenshots below and let me know if you run into any issues here:

1

2

3

4:

5:

6:


7:

Then copy the API key and add it in the theme settings

Player side:
Choose which side of the screen the player will appear on (left / right)

Move content
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.

Toggle icon
choose any font awesome icon name for the player toggle.

Toggle title
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.



Embedded Youtube videos fixed size
(Jeff Atwood) #8

I am curious what the use case is for this? Can you provide an example?


(Brendan Schlagel) #9

Very cool! To Jeff’s question re: use case…when I first saw this I actually thought it might have something to do with enabling any embedded YouTube video to play in a persistent / sticky frame so you could e.g. play a video at the top of a long topic while scrolling to the bottom and reading the rest of the replies (or perhaps even navigating to a different topic entirely). Like this: Watch video using Picture in Picture on your Mac - Apple Support

Perhaps there are some parts of what you’ve made here that could be adapted for a more general case like that. (Though perhaps better to leave general “sticky video” feature to be handled at browser / OS level as w/ the above example…) I think this looks awesome though I’m having trouble thinking of how it’d be used with a single site-wide playlist.

Actually now that I think about it…if someone had a Discourse forum tied to a specific online course, set up as a playlist so you could go through watching the videos and discuss them as you go…that could be super cool :smiley:


(François Douville) #10

Yes this is what I was thinking. I’m selling online courses and some of them are free (but I’m with Vimeo). It would be great for us to give an overview of our online courses in Discourse!


(Joe) #11

The most common use case would be as a music player in the background. This is what I had in mind when I started working on it.

Another use case is live videos. It’s possible to add live videos to the theme. This use case makes it possible to use Discourse as a real-time commenting system on live videos.

Other use cases include something like @bts described where site owners can share relevant content with users. This is definitely possible with a regular topic, however this implementation makes it more seamless as the videos are in a playlist and sort of have their own space.

If nothing else, this serves as an example of cool things that can be done in Discourse themes.


I believe this theme component does exactly that:


It’s not possible to use Vimeo with this component as it’s built around the Youtube API.


(Daniel Nevoigt) #12

Awesome work :heart_eyes:
Perfectly use for my rating categories to show a playlist of trailers from my top rated movies etc. to the vistors. So they don´t need to scroll through all the topics.
Real nice, I love it :grinning:


(Daniel Nevoigt) #13

and soon the first is asking for help :sweat_smile:

  1. I have complete css hellfire with firefox all browser with bigger resolution than 2049px in width and I am not able to see the error. #main-outlet has lost color, the header banner is completely disappeared and the “push-content” function from the component doesn´t work at all:

  2. will be a customization question. Is it possible to push both to the right, header and main-outlet? As I have it not full-width :open_mouth:

Thanks in advance :slight_smile:

Ah, if you want to see it live:

Note:

A bit of trying showed me that some of my custom css conflicts with the component, and also my particle.js theme component conflicts. But strange its only Firefox. I tested Edge, Firefox and Chrome Browser…

Second test showed me that it has something to do with my display resolution :smiley: My working display has a resolution of 2560 x 1440 px. So everything above tested resolution of 2049px in width breaks the layout. On mobile devices it is also broken. I am wondering where I have the errors …


(François Douville) #14

Do you mean like webinar?


(Carl Moebis) #15

We’re doing the same thing with Vimeo. I even posted a bounty in #marketplace to allow chapter markers.


(Adrianbblk) #16

Vk.com becomes popular because of (or thanks to) this feature. Well, is they have something more extended. There you can search for songs which are hosted (illegal probably) on the website.

I like the idea, but I guess would be better if we would allow users to search for they’re own music :smiley:


(Joe) #17

@Daniel_Nevoigt

Yes, that would definitely be a conflict with your custom CSS.

I’m not sure if you’ve made changes since your last post, but I just checked your site and everything seems ok.

It will only push the content aside if there isn’t enough room for the content and the player to display side-by-side in full width and if the width of the content does not end up being too small. There’s no point pushing the content aside on a 4k screen for example. There’s also no point squeezing the content to be 600px wide.

Yes, you can have a live Youtube video playing in the player and dedicate a topic for that livestream where users can watch the stream / post in real-time.

I am not very familiar with the Vimeo API but I cannot imagine it wouldn’t offer most of the functionality found in the Youtube API. You can actually re-purpose a lot of the code in this theme to create a Vimeo player.

That’s beyond the scope of this theme. If it’s up to the user and their preferences, it’s a lot better to just have Youtube open in a separate tab.


(Daniel Nevoigt) #18

@Johani Thx for looking, yes I have made some changes. I have removed my particle.js theme component and edited some of your components css.

I would really appreciate if you could tell me, how I can acomplish that also my boxed .d-header gets pushed alongside with the content area when opening the player. At the moment I have disabled that function and have shrinked the player itself to fit beside on Full-HD resolution. For the .d-hader I have following code atm:

/* shrink + center header */
.d-header {
    max-width: 1150px;
    margin: 0% auto;
    left: 0;
    right: 0;
    z-index:100;
}

And another question, if you have time and fun, possibly you could add in future releases a multiple playlist option? Perhaps with tab like navigation or something similar elegant like the whole component itself :slight_smile:


(François Douville) #19

When I click on play in the bottom bar

59

it does anything. I mean the video don’t come back.


(François Douville) #21

We can’t embed our live videos on other website if we don’t link an adsense account… and this function is not available in my country (Canada)

23

https://support.google.com/youtube/answer/2474026?hl=en&ref_topic=6136989

Do you have a solution? Thanks


(Egor) #22

wow, this is pretty amazing! Thanks @Johani :heart_eyes:

Small issue: when I select “If checked, the player will push content aside when open.”, some sort of weird parallax starts happening to my background picture on scroll, basically breaks down the picture into several segments and disconnects them

hope that makes sense


(Per Torstensson) #23

Amazing plugin, thank you @Johani!

Two small issues which I can only note but not solve myself unfortunately:

  • Toggle breaks - I found that you can reproduce a quite common scenario when the toggle breaks:
    1. Open/toggle video sidebar
    2. Click any topic link
    3. Scroll down to when the topic title replaces the site logo important!
    4. Try to close/toggle video sidebar
      The above scenario will break the toggle 100% of the time.
  • No icons - Since the introduction of Font Awesome 5, no icons render for the toggle button etc.

All the best
-Per


(Jason) #24

this don’t work with my theme. maybe i have too many components ?

once i disable it from the theme, it works great, but goes away when i refresh.

but when i add it to a theme, it don’t work anymore, only when i remove it.

any suggestions?


(Vincent) #25

Hey @Johani! Could you find the time to update your component to FontAwesome SVG?

By the way, this is how it looks on my instance:

I believe it is supposed to display playlist contents under the player; maybe the feature broke?


#26

not working for me, doesn’t do anything


(Egor) #27

stopped working with my theme :confused:
please help @Johani, our users loved this feature