DEV Community

Cover image for Automatically Embed Latest Youtube Videos on your Website with JavaScript (step by step)
Julia Furst Morgado
Julia Furst Morgado

Posted on

Automatically Embed Latest Youtube Videos on your Website with JavaScript (step by step)

In this tutorial, you’ll learn how to make an HTTP request to Youtube with the JavaScript fetch() method to dynamically embed new video on your website as you publish it on youtube. You can find the whole code on GitHub

Fetch API comes with a fetch () method that allows you to fetch data from different places and work with the data fetched. It allows you to make an HTTP request, i.e., either a GET request (for getting data) or POST request (for posting data).

Here is a simple example of fetching data which makes it easier to understand the concept.

Image description

HTML Code

Begin by creating an HTML file and three divs with iframe elements inside with the class "latestVideoEmbed". If you want to add more videos, add more divs. Don’t forget to add a link to the stylesheet and the javascript file through the script tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube Fetch API Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div>
<iframe class="latestVideoEmbed" vnum='0' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<iframe class="latestVideoEmbed" vnum='1' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<iframe class="latestVideoEmbed" vnum='2' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>

    <script src="js/main.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

JS Code

Now let’s tackle the javascript code.

Creating the Main Function

We will create an arrow function that will englobe all the code.

const loadVideo = (iframe) => { /* CODE IN HERE */ }
Enter fullscreen mode Exit fullscreen mode

Getting the URL of the API

Build a URL to send the GET request to.

  • Specify your unique channel ID (cid)
const cid = "UC_un3YZXBtAlCyApGu4_eSP"
Enter fullscreen mode Exit fullscreen mode

To find your channel ID: Sign in to YouTube. In the top right, click your profile picture Settings. From the left menu, select Advanced settings. You'll see your channel's user and channel IDs. https://www.youtube.com/account_advanced

  • Encode the URL with the channel ID as a query string parameter.

Safely encode a URL using JavaScript such that it can be put into a GET string.

const channelURL = encodeURIComponent(`https://www.youtube.com/feeds/videos.xml?channel_id=${cid}`)
Enter fullscreen mode Exit fullscreen mode
  • RSS to JSON API.

The rss2json API allows developers to convert an RSS feed into properly formatted JSON data by submitting its URL so that it can be fetched, then you can embed the results to your sites.

const reqURL = `https://api.rss2json.com/v1/api.json?rss_url=${channelURL}`
Enter fullscreen mode Exit fullscreen mode

Sending a Request

In the fetch request, we pass the URL of the API as a parameter(reqURL), which represents the path of the resource to be fetched.

fetch(reqURL)
Enter fullscreen mode Exit fullscreen mode

Then a response is received. However, the response we get is not JSON, but an object with a series of methods that can be used depending on what we want to do with the information.

We’ll add the then() method, which will contain a function with a parameter called response. The response parameter takes the value of the object returned from fetch(url). To convert the object returned into JSON, use the json() method.

.then(response => response.json())
Enter fullscreen mode Exit fullscreen mode

Reading the response

The browser immediately starts the request and returns a promise that the calling code should use to get the result.

The dataset has many properties, but we will focus only on the link property.

When the fetch is successful, we read the response body and parse the result as JSON, then read values out of the resulting objects and set the appropriate URL in the src to display each video accordingly.

The JSON data still needs to be processed. Add another then() statement with a function that has an argument called result:

.then(result => { })
Enter fullscreen mode Exit fullscreen mode

Still within the main function, we’ll create a variable called videoNumber equal to vnum from the HTML file.

const videoNumber = iframe.getAttribute('vnum')
Enter fullscreen mode Exit fullscreen mode

Create a variable called link that is set equal to the URL from each item:

const link = result.items[videoNumber].link;
Enter fullscreen mode Exit fullscreen mode

Create a variable called id that is set equal to query parameter of each link:

The handy JavaScript substring() method will create a new string from the link starting from the next character after the = sign. So for ex the link for vnum 0 is "https://www.youtube.com/watch?v=8SjHoeyn3Ac" and the id is 8SjHoeyn3Ac

const id = link.substring(link.indexOf("=") + 1);
Enter fullscreen mode Exit fullscreen mode

Each iframe needs the appropriate src to display the video. The src attribute specifies the location (URL) of the video file. The string interpolation will allow us to do it (it’s the same as if we were concatenating the variables).

iframe.setAttribute("src", `https://youtube.com/embed/${id}?controls=0&autoplay=1`);
Enter fullscreen mode Exit fullscreen mode

Catching errors

The API you call using fetch() may be down, or other errors may occur. If this happens, the reject promise will be returned. The catch method is used to handle reject. The code within catch() will be executed if an error occurs when calling the API of your choice.

.catch(error => console.log('error', error));
Enter fullscreen mode Exit fullscreen mode

Loop

Finally, we use a DOM selector to grab the iframe. Use getElementsByClassName() with 'latestVideoEmbed' as the argument and iterate with a for loop through the JSON data fetched and add them to the iframe elements.

const iframes = document.getElementsByClassName('latestVideoEmbed');
      for (let i = 0, len = iframes.length; i < len; i++) {
        loadVideo(iframes[i]);
      }
Enter fullscreen mode Exit fullscreen mode

CSS Code

On the HTML file, let's add a new div with the class "videos" comprising all three divs to put them side to side.

<div class="videos">
<div>
<iframe class="latestVideoEmbed" vnum='0' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<iframe class="latestVideoEmbed" vnum='1' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<iframe class="latestVideoEmbed" vnum='2' width="600" height="340" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Enter fullscreen mode Exit fullscreen mode

On the CSS file, let's style it using flexbox.

.videos{
display: flex;
justify-content: center;
}

iframe{
  padding: 1rem;
}
Enter fullscreen mode Exit fullscreen mode

Summary

  • You just successfully performed a GET request using the Youtube API and the Fetch API. Now, your latest uploads will be pulled out automatically and organized into your page dynamically.
  • Use the fetch() method to return a promise that resolves into a Response object. To get the actual data, you call one of the methods of the Response object e.g., text() or json(). These methods resolve into the actual data.
  • Use the catch() method or try...catch statement to handle a failure request.

I hope this tutorial may prove helpful to anybody interested in using YouTube’s API to automatically embed videos on their pages.

If you liked this article, consider following me on Dev.To for my latest publications. I'm tweeting my journey on Twitter daily, this way to my LinkedIn, and this is my Youtube channel :)

Top comments (2)

Collapse
 
shreyvijayvargiya profile image
shrey vijayvargiya

Nice !!!, although the further approach will looks like uploading youtube videos on your custom database and fetching and streaming videos on the website - ihatereading.in/t/EtFj3JWfghyAYcUU...

Collapse
 
jmfayard profile image
Jean-Michel 🕵🏻‍♂️ Fayard

That sounds greats.
Is that lazy loading?
I started macvie.eu/ for a friend who do music,
but I made the mistake to embed 42 youtube iframes and now the performance is shit.