Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML Auto Embedding Recent Uploaded videos from a youtube channel

Tags:

html

youtube

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?

like image 387
CHASE Avatar asked Aug 16 '13 06:08

CHASE


3 Answers

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/

like image 139
Shan Eapen Koshy Avatar answered Nov 18 '22 09:11

Shan Eapen Koshy


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>
like image 42
Shixma Avatar answered Nov 18 '22 10:11

Shixma


<!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>
like image 10
CHASE Avatar answered Nov 18 '22 11:11

CHASE