YouTube Player from a Feeds Widget

page.html

<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>

scripts.js

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();
});

styles.css

.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;
}