CODEWITHSUNDEEP
htmlyoutube
CHASE
CHASE

Reputation: 511

HTML Auto Embedding Recent Uploaded videos from a youtube channel

I was wondering is there was a way to Auto Embed recent uploads from a YouTube channel to a website? I don't even know where to start. Help?

Upvotes: 16

Views: 62117

Answers (5)

Benny Code
Benny Code

Reputation: 54890

In 2022, embedding the latest video from a YouTube channel is quite complicated, but I found a solution that works for personal accounts and brand accounts:

  1. Login to YouTube and open the advanced settings
  2. Copy your channel ID (it will start with "UC" and then some cryptic characters, e.g. "UCYCJ5V6CYFhUr7AhlKaYL4A")
  3. Replace the beginning "UC" with "UU" ("UCYCJ5V6CYFhUr7AhlKaYL4A" becomes "UUYCJ5V6CYFhUr7AhlKaYL4A")
  4. Use the following embed code (using your ID that starts with "UU"):

Embed Code:

<iframe
  src="https://www.youtube-nocookie.com/embed?listType=playlist&list=UUYCJ5V6CYFhUr7AhlKaYL4A"
  width="600"
  height="340"
  allowfullscreen>
</iframe>

Alternative solution for personal accounts:

When you are having a personal YouTube channel that is connected to your Google Mail address, then you can use your Google Mail username to embed your latest upload.

Example: When your email is [email protected], then you can embed your latest video upload with this code:

<iframe 
  src="https://www.youtube-nocookie.com/embed?listType=user_uploads&list=username"        
  width="600"
  height="340"
  allowfullscreen>
</iframe>

Some say that it also works with your YouTube channel ID or YouTube channel name but this didn't work for me.

Reference: YouTube IFrame Player API

Upvotes: 6

jbritain
jbritain

Reputation: 104

Pure JS solution

const frame = document.getElementById("ytEmbed");
const channelID = "[CHANNEL ID HERE]";
var guid="";
            
fetch("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=" + channelID))
    .then(response => response.json())
    .then(data => {
        guid = data["items"][0]["guid"]
        const embedURL = "https://youtube.com/embed/" + guid.replace("yt:video:", "")
        frame.src = embedURL;
    })
    .catch(console.error);

Upvotes: 0

Shixma
Shixma

Reputation: 425

This script no longer works, heres an easy way to do it.

<iframe width="600" height="340" src="https://www.youtube.com/embed?listType=user_uploads&list=YOUR_CHANNEL_NAME_HERE" frameborder="0" allowfullscreen></iframe>

To get your channel name click "My Channel" and its the line of text after "/user/".

Fiddle

Edit

You can also embed playlists with this:

<iframe width="600" height="340" src="https://www.youtube.com/embed/+lastest?list=PLAYLIST_ID" frameborder="0" allowfullscreen></iframe>

Upvotes: 20

Shan Eapen Koshy
Shan Eapen Koshy

Reputation: 3005

Use the following code to auto-embed the latest video from a YouTube channel by specifying the channel ID instead of the channel name. 

var channelID = "UC0xXUfNSFQN3qOmf_G_nT5w";
var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+channelID, function(data) {
   var link = data.items[0].link;
   var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=0&showinfo=0&rel=0");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>

Source: https://codegena.com/auto-embed-latest-video-youtube-channel/

Upvotes: 23

CHASE
CHASE

Reputation: 511

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Recent Upload Thing</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="static_video"></div>
    <script type="text/javascript">
        function showVideo(response) {
            if(response.data && response.data.items) {
                var items = response.data.items;
                if(items.length>0) {
                    var item = items[0];
                    var videoid = "http://www.youtube.com/embed/"+item.id;
                    console.log("Latest ID: '"+videoid+"'");
                    var video = "<iframe width='420' height='315' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>"; 
                    $('#static_video').html(video);
                }
            }
        }
    </script>
    <script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/urusernamehere/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>

Upvotes: 10

Related Questions