"Automatic YouTube videos to site uploader"

StackOverflow https://stackoverflow.com/questions/23350230

Question

Is there a way to automatically upload videos from YouTube to my site, so that when a specific YouTuber uploads a video to his channel, it will also be uploaded to my site, and keeps the older videos? I do have the proper rights from the YouTuber to upload his videos to my website.

However, I did found a JavaScript that does that, but it deletes the older one, so you basically only have 1 video.

Here is the JavaScript I found:

<html>
<head>
<link rel="STYLESHEET" href="menu.css" type="text/css">
<link rel="shortcut icon" href="Pictures/favicon.ico">
<title>SITE NAME</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>

And this for the body:

<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/YOUTUBER/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
</body>
</html>
Was it helpful?

Solution

You should look into the API: https://developers.google.com/youtube/v3/code_samples/ The code you posted only pulls the data for the current video and displays it on the page. It is working as intended.

EDIT:

I did some reading about the Google API, I found they had a perfect example to show you how to work with the data using jQuery. Here is the code, all I had to modify was the user to grab the video feed from. If you create an app that wants users to work with their channels you can use the API and get the key's needed, otherwise you can use the script below, it will load one video and thumbnails for the rest, it will let the user click the thumbs and load the video on your site:

<html>
<head>
<title>My Videos</title>
<style>
.titlec {
  font-size: small;
}
ul.videos li {
  float: left;
  width: 10em;
  margin-bottom: 1em;
}
ul.videos
{
  margin-bottom: 1em;
  padding-left : 0em;
  margin-left: 0em;
  list-style: none;
}
</style>
<script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script>
<script type="text/javascript">
function loadVideo(playerUrl, autoplay) {
  swfobject.embedSWF(
      playerUrl + '&rel=1&border=0&fs=1&autoplay=' + 
      (autoplay?1:0), 'player', '290', '250', '9.0.0', false, 
      false, {allowfullscreen: 'true'});
}

function showMyVideos2(data) {
  var feed = data.feed;
  var entries = feed.entry || [];
  var html = ['<ul class="videos">'];
  for (var i = 0; i < entries.length; i++) {
    var entry = entries[i];
    var title = entry.title.$t.substr(0, 20);
    var thumbnailUrl = entries[i].media$group.media$thumbnail[0].url;
    var playerUrl = entries[i].media$group.media$content[0].url;
    html.push('<li onclick="loadVideo(\'', playerUrl, '\', true)">',
              '<span class="titlec">', title, '...</span><br /><img src="', 
              thumbnailUrl, '" width="130" height="97"/>', '</span></li>');
  }
  html.push('</ul><br style="clear: left;"/>');
  document.getElementById('videos2').innerHTML = html.join('');
  if (entries.length > 0) {
    loadVideo(entries[0].media$group.media$content[0].url, false);
  }
}
</script>
</head>
<body>
<div id="playerContainer" style="width: 20em; height: 180px; float: left;">
    <object id="player"></object>
</div>
<div id="videos2"></div>
<script 
    type="text/javascript" 
    src="http://gdata.youtube.com/feeds/users/YOUTUBER/uploads?alt=json-in-script&callback=showMyVideos2&max-results=30">
</script>
</body>
</html>

OTHER TIPS

Alternatively, you can embed a user's uploaded videos playlist:

<iframe width="420" height="315" src="http://www.youtube.com/embed?listType=user_uploads&list=username" frameborder="0" allowfullscreen></iframe>

(change username)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top