Created
November 21, 2010 22:49
-
-
Save danwoods/709250 to your computer and use it in GitHub Desktop.
Pulls the 7 most recent youtube videos from user and arranges them on the page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*Standard Elements*/ | |
hr{ | |
width: 99%; | |
} | |
/*My Elements*/ | |
#multimedia_container{ | |
height: 700px; | |
} | |
#featured{ | |
width: 475px; | |
margin-left: 10%; | |
margin-right: 10%; | |
} | |
#featured .video_title span{ | |
color: blue; | |
font-size: 20px; | |
height: 125px; | |
} | |
#featured_summary{ | |
font-size: 12px; | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 5px; | |
} | |
#recent_vid_header{ | |
font-size: 12px; | |
font-weight: 600; | |
margin-top: 20px; | |
margin-left: 15px; | |
color: blue; | |
} | |
.row{ | |
margin-top: 20px; | |
margin-left: 5%; | |
margin-right: 5%; | |
} | |
#top_row{ | |
margin-top: 10px; | |
} | |
#bottom_row{ | |
clear: left; | |
} | |
.row .video{ | |
display: inline-block; | |
float: left; | |
margin-top: 10px; | |
width: 175px; | |
cursor: pointer; | |
} | |
.row .video img{ | |
display: block; | |
margin-left: auto; | |
margin-right: auto; | |
height: 84px; | |
width: 150px; | |
} | |
.video_title{ | |
position: relative; | |
margin-left: auto; | |
margin-right: auto; | |
margin-bottom: 2px; | |
text-align: center; | |
height: 40px; | |
font-size: 12px; | |
font-family: helvetica, arial, sans-serif; | |
overflow: hidden; | |
} | |
#featured .video_title{ | |
font-size: 20px; | |
margin-bottom: 5px; | |
line-height:120%; | |
height: 55px; | |
} | |
.hidden{ | |
display: none; | |
} | |
#yt_link{ | |
clear: left; | |
padding-top: 35px; | |
} | |
#yt_link img{ | |
margin-top: 5px; | |
margin-left: auto; | |
margin-right: auto; | |
display: block; | |
} | |
#yt_link span{ | |
margin-left: auto; | |
margin-right: auto; | |
text-align: center; | |
display: block; | |
} | |
#yt_link a{ | |
text-decoration: none; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
//some variables | |
var videos = []; //placeholder for video information returned from youtube | |
var video_elm_arr = $('.video'); //array of 'video' elements in DOM | |
//hide videos until ready | |
$('.video').addClass('hidden'); | |
//pull video data from youtube | |
$.ajax({ | |
url: 'http://gdata.youtube.com/feeds/api/users/danwoodson/uploads?alt=json', | |
dataType: 'jsonp', | |
success: function(data) { | |
$.each(data.feed.entry, function(i,item){ | |
//only take the first 7 videos | |
if(i > 6) | |
return; | |
//create object to hold the video's info | |
videos[i] = {}; | |
videos[i].title = item.title.$t; | |
videos[i].url = item.media$group.media$content[0].url; //this will need to be cleaned before use | |
videos[i].summary = item.content.$t; | |
videos[i].thumbnail = item.media$group.media$thumbnail[3].url; | |
//assign title | |
$(video_elm_arr[i]).find('.video_title').append(videos[i].title); | |
//clean url | |
var video_url = videos[i].url; | |
var index = video_url.indexOf("?"); | |
if (index > 0) | |
video_url = video_url.substring(0, index); | |
//and re-assign | |
videos[i].url = video_url; | |
if(i == 0){ //only for featured/main | |
//resize featured title area based on length of text | |
var title_len = videos[i].title.length; | |
var lines_needed = title_len / 30; | |
if(lines_needed < 1) { lines_needed = 1; } //account for titles less than 1 line | |
var space_needed = lines_needed * 25; | |
$('#featured .video_title').css('height', space_needed); | |
//insert flash object in video element | |
$(video_elm_arr[i]).find('.video_title').after('<object id="video_0" width="475" height="267.1875">' + | |
'<param name="movie" value="' + video_url + '&showinfo=0"></param>' + | |
'<param name="allowFullScreen" value="true"></param>' + | |
'<param name="allowscriptaccess" value="always"></param>' + | |
'<embed src="' + video_url + '&showinfo=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="475" height="267.1875"></embed>' + | |
'</object>'); | |
//and include summary | |
$(video_elm_arr[i]).find('#featured_summary').html(videos[i].summary); | |
} | |
else{ //else just use thumbnail and enlarge | |
$(video_elm_arr[i]).find('.video_title').after('<img src="' + videos[i].thumbnail +'" alt="video" id="video_' + i + '" />'); | |
$(video_elm_arr[i]).find('img').animate({height: 84.375, width: 150}, 500); | |
} | |
//and finally show | |
$(video_elm_arr[i]).removeClass('hidden'); | |
}); | |
}, | |
error: function(XMLHttpRequest, textStatus, errorThrown) {alert("error with retrieving videos");} | |
}); | |
//create functionality | |
$('.non_featured').bind('click', function(){ | |
//get clicked video's id | |
var clicked_vid_id = $(this).find('img').attr('id'); | |
//clean | |
var index = clicked_vid_id.indexOf("_"); | |
if (index > 0) | |
clicked_vid_id = clicked_vid_id.substring(index+1); | |
//get featured video's id | |
var cur_featured_vid_id = $('#featured').find('object').attr('id'); | |
//clean | |
var index = cur_featured_vid_id.indexOf("_"); | |
if (index > 0) | |
cur_featured_vid_id = cur_featured_vid_id.substring(index+1); | |
//create new swf object with clicked video's information | |
var new_featured_vid_swf = '<object id="video_' + clicked_vid_id + '" width="475" height="267.1875">' + | |
'<param name="movie" value="' + videos[clicked_vid_id].url + '?showinfo=0&autoplay=1"></param>' + | |
'<param name="allowFullScreen" value="true"></param>' + | |
'<param name="allowscriptaccess" value="always"></param>' + | |
'<embed src="' + videos[clicked_vid_id].url + '?showinfo=0&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="475" height="267.1875"></embed>' + | |
'</object>'; | |
//clear out clicked video's image | |
$(this).find('img').remove(); | |
//clear out featured video's original swf object | |
$('#featured').find('object').remove(); | |
/*assign newly created swf objects to their appropriate locations*/ | |
//set clicked | |
$(this).find('.video_title').html(videos[cur_featured_vid_id].title); | |
$(this).append('<img src="' + videos[cur_featured_vid_id].thumbnail +'" alt="video" id="video_' + cur_featured_vid_id + '" />'); | |
//and set new featured/main | |
$('#featured .video_title').html(videos[clicked_vid_id].title); | |
$('#featured .video_title').after(new_featured_vid_swf); | |
$('#featured #featured_summary').html(videos[clicked_vid_id].summary); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" | |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
<head> | |
<title>Multimedia Page</title> | |
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> | |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> | |
<script type="text/javascript" src="multimedia.js"></script> | |
<link rel="stylesheet" type="text/css" href="multimedia.css" /> | |
</head> | |
<body> | |
<div id="multimedia_container"> | |
<div id="feature_container"></div> | |
<div id="featured" class="video"> | |
<p class="video_title"><span>Featured Video: </span></p> | |
<p id="featured_summary"></p> | |
</div> | |
<hr /> | |
<p id="recent_vid_header">Recent Videos</p> | |
<div id="top_row" class="row"> | |
<div id="top_row_left" class="video_left video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
<div id="top_row_center" class="video_center video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
<div id="top_row_right" class="video_right video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
</div> | |
<div id="bottom_row" class="row"> | |
<div id="bottom_row_left" class="video_left video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
<div id="bottom_row_center" class="video_center video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
<div id="bottom_row_right" class="video_right video non_featured"> | |
<p class="video_title"></p> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment