Create a gist now

Instantly share code, notes, and snippets.

@jonwilcox /page.html
Last active Oct 10, 2015

What would you like to do?
YouTube Player from a Feeds Widget
<div class="youtube_widget">
<widget type="feeds">
<arg id="url">https://www.youtube.com/feeds/videos.xml?channel_id=UCouAv6HRsF5l6z-Opqy_Zgg</arg>
<arg id="format">{title}</arg>
<!-- You can set the max arg to whatever you want -->
<arg id="max">4</arg>
</widget>
</div>
function youtubePlayer() {
$('.youtube_widget').prepend('<div id="ytPlayer"></div>'); //add a container for the player
$('.youtube_widget a').each(function(index){
var vars = [], hash;
var q = $(this).attr('href').split('?')[1];
q = q.split('&');
for(var i = 0; i < q.length; i++){
hash = q[i].split('=');
vars.push(hash[1]);
vars[hash[0]] = hash[1];
}
var videoID = vars['v']; // Get the Video ID from the feed link
$(this).prepend('<img src="//i.ytimg.com/vi/' + videoID + '/2.jpg" class="thumb" />'); // Generate a thumbnail from the Video ID
if (index == 0) updatePlayer($(this), videoID); // Add the player for the first video
$(this).click(function(){
updatePlayer($(this), videoID); // Update the player when videos are clicked
return false; // Don't follow feed link
});
})
}
function updatePlayer(current, videoID) {
var playerWidth = $('.youtube_widget').width(); // Set width of player to that of the parent div
var playerHeight = playerWidth/4 * 3; // Set height of player based on 4:3 ratio
var iframe = '<iframe width="'+playerWidth+'" height="'+playerHeight+'" src="//www.youtube.com/embed/' + videoID + '?hl=en_US" frameborder="0" allowfullscreen></iframe>'; // Generate iframe
$('#ytPlayer').html(iframe); // Insert iframe
$('.youtube_widget a').removeClass('current'); // Clear 'current' class
current.addClass('current'); // Add 'current' class to clicked video link
};
$(document).ready(function(){
youtubePlayer();
});
.youtube_widget {
width: 300px; /* Edit this to your desired width, or omit for the player to fill its container's width */
}
.youtube_widget li {
margin: 0 !important;
}
.youtube_widget a {
overflow: hidden;
display: block;
font-weight: bold;
border-bottom: 1px dotted #999;
padding: 5px;
}
.youtube_widget a.current {
background-color: #FEE9B7;
}
.youtube_widget img {
float: left;
width: 75px;
margin-right: 10px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment