6

I'm trying to embed a youtube playlist with a sidebar to my html page.

The playlist itself can be embedded by this html code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLMC9KNkIncKtPzgY-5rmhvj7fax8fdxoj" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="1"/>

This displays the playlist, but without a sidebar. So I now want to add a sidebar next to the youtube playlist display.

So the final view should be something like this:

example yt sidebar

The sidebar items should be the thumbnail images of the next videos. You should be able to scroll/navigate to the next/previous videos in the playlist that aren't displayed. And when you click on the sidebar items the displayed video should be updated to the clicked video and the sidebar should updated to the next available videos.

On youtube playlist sidebars are displayed like this:

screen youtube with sidebar

So we would like an alteration of that sidebar with only the image thumbnails. So a 'cleaner' look of the youtube sidebar.

Note: The solution should only use html/css/javascript.

These 2 questions have asked the same, but these are from to long ago and both the iframe and plugin solution don't seem work anymore.:

Edit:

The example in the answer seems to be outdated, here a functional version. (Full credits to @Skyrocker of course)

Daan Seuntjens
  • 880
  • 1
  • 18
  • 37

3 Answers3

13

TL;DR: you'll have to use official Google Youtube API

Unfortunately it's impossible to use the same "easy" approach, like the one that you use with a iframe embedded Youtube. To be able to customize the look of the playlist you need to do a few preparation steps:

  1. Create a google developer account to receive the needful API.
  2. Create a project
  3. On the credentials page - on the tab OAuth consent screen fill the required fields and add your site domain into Authorized domains section (For testing purposes add a https://cdpn.io, but don't forget to replace it with your actual site domain later)
  4. Go again to the credentials page - create an API key, restrict it to use only the Youtube Data API (at the very bottom of the list)
  5. Go again to the credentials page - create an OAuth ClientId. For testing purposes add a https://cdpn.io domain to the Authorized JavaScript origins, but don't forget to replace it with your actual site domain later
  6. Enable the API Services for Youtube

Then, after doing all from this list, see the codepen example how to orchestrate this. A few requirements:

  • Fill API keys variables
  • The implementation, that built on the Google API, will require the confirmation from user to access the services. This is up to you to think of the flow when to initialize this confirmation pop.

Updates:

Indeed, you were right, those methods can be invoked without auth.

Here is your upgraded version of the list

Skyrocker
  • 970
  • 8
  • 15
  • Thanks for your explanation, but is missing one important functionality: when you click the thumbnail the playlist itself should skip to the clicked video, do you know if that's possible? – Daan Seuntjens Aug 18 '19 at 18:54
  • 5
    of course it's totally possible :) but, it's stackoverflow, you know?) not an Upwork... Here we provide targeted solutions about the *showing the core concept* of **how** to achieve what you need. – Skyrocker Aug 18 '19 at 20:05
  • @DaanSeuntjens could you please approve this answer? I think the stuff like "state management" and "handle click on the image and re-fetch data" is outside of this topic and can be easily implemented in a few hours for sure... – Skyrocker Aug 22 '19 at 12:56
  • "The implementation, that built on the Google API, will require the confirmation from user to access the services. This is up to you to think of the flow when to initialize this confirmation pop." --> Is it possible to avoid the user needing to login? For example by always logging in with my own account or something similar? – Daan Seuntjens Aug 26 '19 at 14:03
  • First, that came on mind, is to use the [backend proxying](https://developers.google.com/youtube/v3/quickstart/nodejs) for this purposes. This approach will be definitely the best choice, especially for security reasons. Can't remember, if the client side have such ability to "silently" log in to the google API, but if I found any - I'll update my answer... – Skyrocker Aug 27 '19 at 09:15
  • Hi Skyrocker, I've investigated a bit myself. My codepen adaptation of your code: https://codepen.io/Daan_Seuntjens/pen/XWrMyRz. The only methods I use in this code are: get playlist list and get video id. If you now check this link: https://developers.google.com/youtube/v3/getting-started you can see that the authorisation required isn't needed for these functions. So we should be able to call an unauthorised request. Do you have any idea of how to do an unauthorised request? – Daan Seuntjens Aug 27 '19 at 11:16
  • 1
    Sure. Done, in both examples – Skyrocker Aug 29 '19 at 14:05
0

You could YouTube Data API to embed a YouTube playlist with a sidebar but for that you have to do a lot of stuff. You would have to create a Google Developer account so that you get access to that API. Then you could create your project and create API and modify it according to your needs. And after you have made all the changes enable the API Services for YouTube and you are good to go.

Kundan
  • 1,754
  • 16
  • 37
-6

Implement divs of main page and sidebar, the way you embed video anywhere in the page, add it to the sidebar div, no trouble.

Povilas Brilius
  • 13
  • 1
  • 7