Categories
Web YouTube

Embed a YouTube channel Subscribe button to your website

Were you thinking of adding your YouTube channel to your website?
Or maybe trying to find out how you can embed a YouTube channel to your website?

You have landed on the right place!


Before writing this blog, I was also exactly on your shoe. I was trying to embed my channel to this site (which you can see in the footer now) but it took me a while to figure this out.

Once I was successful, I thought sharing this here might be helpful for information seekers like me and you!


This is a guide on how you can embed YouTube channel to any nature of websites. By nature I mean, you can implement tutorial on any websites independent on what technology they are built with.

To make it simple, this will work on a simple static website with HTML, CSS and JS or dynamic websites built with PHP, python or CMSs like WordPress, Drupal or even blogger!

There are tons of tutorials and Google’s official documentation on embedding a video to a website or embedding a playlist. But for adding your channel to your site, it’s very hard to find one.

Just follow this tutorial and your changes will be live in no more than a few minutes. If you have already embedded your video or playlist to your site, you can skip the first half and go straight to the final part: embed a youtube channel to your website.

By the end of this tutorial, you will have a result like shown in the image below:

youtube channel ksp

Embedding a YouTube video to website

Embedding your or any YouTube video to your website is fairly easy. To embed your desired video just follow the following steps:

  • open your desired video on youtube.com
  • under the title of the video being played, you will see a tab for sharing and saving
  • tap on Share
  • clicking on Share button will pop up a dialog box showing different sharing options including the URL of the video
  • choose the first option Embed
  • copy the code by selecting or clicking on the copy
  • if you need to customize scroll down to find embed options, dimensions can be adjusted by directly editing the copied code
  • once you have the iframe code of the video to be embedded. All we need to do is paste it into the destination website
  • if you are using WordPress, you can add custom HTML from the block editor and paste it there for posts and pages.
  • To add the video to your WordPress footer, just add Custom HTML widget and paste the code and tap Done when finished and your video is successfully embedded!
  • if you are using any other platform just paste the copied code into your destination page, save it and you will be live!

Embed a YouTube playlist to website

Embedding a playlist from YouTube is similar to embedding a YouTube video to a website. Major steps are outlined below:

  • Open the video playlist by tapping view full playlist
  • At the left side under your video, you will see buttons for sharing (single arrow) and saving.
  • tapping on the sharing icon will display options for embedding, social sharing and URL of the playlist
  • Click on embed to view the code to be embedded
  • copy the code, scroll down if you need advanced options
  • now time to go back to your website, paste it to your desired destination and save to see the changes!
  • if you are using WordPress, you can add custom HTML from the block editor and paste it there for posts and pages.
  • To add the playlist to your WordPress footer, just add Custom HTML widget and paste the code and tap Done once finished and your video is successfully embedded!

Embedding your channel to your website

While embedding a video and playlist is similar, it’s little bit different for channel embed. But don’t worry, it’s easier than you have imagined. 🙂

Here are the quick steps:

Get the channel id

  • First things first, you need channel id of your channel, if you have got it already you can skip the part of obtaining channel id and goto setting up your code
  • if you haven’t got your channel id, you can find it by going to your channel and looking over the channel URL (link) on the address bar
  • Clicking on Your Channel after tapping on your channel photo will display your channel id on URL
  • now if you look over the address, you’ll see something like
https://www.youtube.com/channel/channel-id-is-here/
  • copy the channel id (which is in between two forward slashes /channel-id-is-here/

Make your youtube channel embed code ready

  • once you have your channel id, insert in the following code
<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="enter-your-channel-id-here" data-layout="full" data-theme="default" data-count="default"></div>
  • in the above code, place your channel id by replacing the text enter-your-channel-id-here in between the quotes of data-channelid
  • now, copy the whole code and paste it into your destination website, save it and see it working!
  • if you want you can place the script somewhere else or leave it as it is
  • if you are using WordPress, you can add custom HTML from the block editor and paste it there for posts and pages.
  • To add the channel to your WordPress footer, just add Custom HTML widget and paste the code and tap Done once finished and your channel is successfully embedded!

Below is my final working code and the output right under:

<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="UCypRgfO6Hh1tnb_G6qArm7A" data-layout="full" data-theme="default" data-count="default"></div>

and the output:

Hope this guide became helpful for you to embed a youtube channel to your website.

If it didn’t work or if you have confusions, don’t forget to comment down below and I will reply to you asap. 🙂


Subscribe today to get awesome videos!

By Lakshman Basnet

Digital Media Marketer from Nepal who enjoys publishing web content, blogs and YouTube videos.