195
the iframes - YouTube API key

With the YouTube API key, Google allows you to host your channel on your website using iframes. Indeed, by using this feature, you can connect your channel for an automatic update of the videos. So, you could let the code help you with updates to your site. In this article, we will see how to do the synchronization. The article is in three parts. In the first part, we will see how to create credentials. Then we will use the codes that you can copy and paste to do the synchronization. Finally, the last part of this article will give you tips to make it easy depending on the type of web solution you are using.

The advantages of the YouTube API key

APIs (or Application Programming Interface) gives you the benefits of connecting to data from an external platform as easily as possible. With the YouTube API, you can connect the feeds from your YouTube channel to your website. Below are some advantages compared to the manual procedure.

  • No need to copy the link of your video manually. Through API, you can get the link and several other data.
  • Double your online visibility. Videos on your site have the advantage of increasing your traffic. Using the API, you could create a video library and keep your visitors on your website.
  • You have flexibility in data manipulation. With the API, you can, for example, get the description, summary, banner photo of your video. Besides, you can customize the design of your site to your liking.

Prerequisites for connecting YouTube to your website

To connect your channel to your site, you obviously need a YouTube channel, a website and a Google Cloud account. I’m going in this part to explain how to proceed to have these three elements if you do not have any.

Connexion YouTube

How to create your YouTube channel

To create your YouTube channel, you must have a Gmail or G-Suite account.

For all Gmail and G-Suite subscribers

  • Visit the YouTube site and click “connect.” When you click on the button, the site will redirect you to the login page.
  • Enter your username and password to log in.
  • You will be redirected to the YouTube page. You can click the camera icon in the top and right corner to add your videos.

If you don’t have a Gmail or G suite account

  • Go to YouTube and click “connect.” Once that’s done, you will most likely find yourself on a page asking you to create your account.
  • Click on “Create an account” (You will have the choice between creating an account for yourself or managing your business).
  • Choose the option that fits your goals.
  • Then, follow the steps offered by Google to create your account. In most cases, you need your name, first name, a unique email (which you will choose) and the password.
  • To add videos, click on the camera icon in the top-right corner of your YouTube page

Google Cloud

How to create a Google Cloud account to get the YouTube API key

The Google Cloud account is an interface offering a set of APIs, including the YouTube API. We will see how to have a Google Cloud account. To create a Google Cloud account, follow these steps:

  • go to the Google Cloud website and click on “Go to the console.”
  • Just like the creation of the YouTube account, you will be redirected to the login page.
  • You need to use an existing Gmail or G Suite account or create a new one on this page.
  • Once connected, you must follow the steps offered by the platform to configure your account.
  • You must add payment information to be able to activate your account.

Please note that Google Cloud offers paid apps based on the number of requests per day. You might never have to pay if you use a little application. I advise you to refer to the terms and conditions before committing.

How to create a website

I guess if you want to connect YouTube to your site, then obviously, you have one. Otherwise, the easiest option to use this article is to have a self-hosted site. Indeed, to be able to modify the codes of your site, you must have authorization. Online website builders or free solutions do not offer this freedom.

Create your website yourself

The generic steps for creating a self-managed site are as follows:

  • Find a domain name and a web host. Several hosts give you the possibility of having a domain name for free. For example, you can find options for less than $3.95 per month online.
  • Choose the solution that interests you for the creation of your website.
  • Create Your Site.

I recommend this video and article, which explains how to create a self-managed website with less than $5

Recruit a developer

A developer or a web agency can help you develop and choose the ideal solution. Our agency offers you, for example, solutions adapted to your needs at a fairly competitive cost. If you want to know more about what we offer, visit our services or contact us.

 

Create your YouTube API key and retrieve the ID of your YouTube Channel

If you have all the items discussed above, namely a website, a YouTube channel and a Google cloud account, you can continue with the following.

Create your YouTube API key

It would be best if you had the API key to sync your website with YouTube. To get the API key, you need to follow the following steps:

YouTube API key

When you have clicked on activating, the platform will generate a code (API) that you will use in the second part.

Retrieve YouTube Channel ID

To retrieve the ID of your YouTube channel, you must:

  • Log in to your YouTube account where your channel is located.
  • Then In the right corner at the top of the page, click on setting / Configuration.
  • In the left menu, click on Advanced Settings / Advanced configuration.
  • You will find your login details among the list of other information on the page.

Your YouTube channel ID is also on the URL when you follow the steps:

  • Click on your profile picture (in the top-right corner), and a drop-down menu will appear.
  • Then click on “Your Channel.”
  • You will see your channel ID just after youtube.com/channel/ at the URL level

Use the code below to display your videos on your site

<?php
$API_key    = 'xxxx'; // Remplacez par votre clé API
$channelID  = 'xxx';  // Remplacez par votre identifiant Youtube
$maxResults = 10;

// Faire un Appel API pour récuperer la liste des vidéos en format Json
$myQuery = "https://www.googleapis.com/youtube/v3/search?key=$API_key&channelId=$channelID&part=snippet,id&order=date&maxResults=$maxResults";
$ch = curl_init();
    
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_URL, $myQuery);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($ch, CURLOPT_VERBOSE, 0);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    $response = curl_exec($ch);
        
    curl_close($ch);
        
    $data = json_decode($response);
        
   $decoded= json_decode(json_encode($data), true);
 
 
// Run a loop to display list of videos
foreach ($decoded['items'] as $items)
{
$id = $items['id']['videoId'];
$title= $items['snippet']['title'];
$description = $items['snippet']['description'];
$thumbnail = $items['snippet']['thumbnails']['default']['url'];
if(!empty($id)) {
?>
<div class="col-md-4">
    <div class="videoWrap controllles">
                            <img src="<?php echo $thumbnail; ?>" alt="<?php echo $post->post_title; ?>">
                            <div class="play_video">
                                <a class="video_popup" href="<?php echo "https://www.youtube.com/watch?v=".$id; ?>"><i class="fa fa-play"></i></a>
                            </div>
                        </div>
                        <div class="videoblog">
                        <h2><?php echo $title; ?></h2>
                        <p><?php echo $description; ?></p>
                        </div>
</div>
<?php
}
}
?>

Lines 2 and 3 of the code allow you to add your API key and YouTube ID, respectively. Then line 7 (myQuery) retrieves the YouTube account information using the key and username. All the following are just codes to browse the data to bring up the list of videos. The output of this program will be more or less similar to the screenshot below.

YouTube API key

Notes

  • The code does not include the design. For example, you can use CSS and JavaScript to improve the design and make the page much more beautiful.
  • You can add videos that are not yours. Provided you reassure you that you have the right to avoid prosecution.
  • The API gives you more flexibility than iframes and is much faster.

Conclusion

There are several ways to add YouTube videos to a website. From what we have seen, APIs give you more flexibility.

Thanks for taking the time to read the article. You can leave your comments, and I would be happy to answer you. If you need help setting up a video page on your site, please let us know. Contact.

Do you want a quality website, ecommerce or tools?

Please leave us a message, and an expert will contact you within the next few hours for a free 15 min consultation

  Free Estimate