How to embed a youtube playlist with a sidebar

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

Leave a Comment