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 in 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!
Get $100 Credit on DigitalOcean. Join Now!
This is a guide on how you can embed YouTube channels to any nature of the website. By nature I mean, you can implement tutorials on any website independent of 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 on your website.
By the end of this tutorial, you will have a result like shown in the image below:
Video tutorial for YouTube embeds
Embedding a YouTube video to website
Embedding your or any YouTube video on 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!
Up to 95% off selected domains at Namecheap! Get your Domain now!
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. 🙂
Is there any method that can help on embeding a youtube views of a specific video..
[…] the meta section of this post, I will explain the process of displaying two or more authors on your WordPress […]
Well i have the dark theme in website..and the font is also black… how can i change it to white?
Hi,
You can try replacing
data-theme="default"
withdata-theme="dark"
for dark theme. More details hereThanks