YouTube - Githubissues

drewtoma commented 8 years ago

Any interest in adding YouTube support?

iamtchelo commented 8 years ago

This is a good ideia @tomagig

FranzLulu commented 8 years ago

Actually it's quite simple to add youtube if you have a youtube channel.

First you have to duplicate the RSS part in the jquery.socialfeed.js file (or simply remplace every 'rss' string with 'youtube'if you don't use the RSS functionality).

Then still in the JS file replace in the utility section of the youtube part

post.author_picture = ''; with this post.author_picture = 'imageofyourchoice.jpg';

Where imageofyourchoice.jpg is the URL of your Logo for instance

Then replace

if (options.show_media && item.thumbnail !== undefined ) {
           post.attachment = '<img class="attachment" src="' + item.thumbnail.url + '" />';
}

with this

var str = item.id;
var idVideo = str.replace("yt:video:", "");
post.attachment = '<div class="video-container"><iframe type="text/html" width="560" height="349" src="https://www.youtube.com/embed/' + idVideo + '" frameborder="0" allowfullscreen></iframe></div>';

You can change of course the with and height of your choice.

Then in the index.html where you call the other social network simply add

youtube:{
               urls: ['https://www.youtube.com/feeds/videos.xml?user=yourUser'], //Array: Specifiy a list of youtube feed from which to pull posts
           limit: 10  //Integer: max number of posts to load for each url
 },

Where yourUser is the name of your channel.

Finally if you want to make your video responsive add this in your CSS

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Hope that helps ;-)