Jquery Youtube Box
I’ve just started looking into Jquery, the Youtube box was one of the first things I made. It simply loads the video from Youtube using the video ID. You can type a custom title for the video.
- DEADLINE post-it stop motion
- 7×7x7 Stop Motion Assembly!!
- Western Spaghetti by PES
- Sweet Dreams by Kirsten Lepore
Jquery Code
<script type="text/javascript">
jQuery(document).ready(function() {
// Loads in First Video
jQuery(".Selected").each(function () {
$(this).addClass("YouTubeSelect");
var VidID1 = $(this).attr("id");
var VidTitle = $(this).text();
$("#YouVidTitle").html("" + VidTitle + "");
jQuery("#YouTubeBox").html("<object type=’application/x-shockwave-flash’ style=’width:560px; height:350px;’ data=’http://www.youtube.com/v/" + VidID1 + "&hl=en&fs=1&’><param name=’movie’ value=’http://www.youtube.com/v/" + VidID1 + "&hl=en&fs=1&’ /></object>");
});
// Generates List
jQuery("#YouVid li").each(function () {
var VidID = $(this).attr("id");
var VidTitle = $(this).text();
$(this).html("<span><img src=’http://i1.ytimg.com/vi/" + VidID + "/default.jpg’ alt=’" + VidTitle + "’ title=’" + VidTitle + "’ width=’120′ height=’90′ /><small>" + VidTitle + "</small></span>");
});
// Loads Video
jQuery("#YouVid li").click(function () {
$("#YouVid li").removeClass("YouTubeSelect");
$(this).addClass("YouTubeSelect");
var VidID1 = $(this).attr("id");
var VidTitle = $(this).text();
$("#YouVidTitle").html("" + VidTitle + "");
$("#YouTubeBox").html("<object type=’application/x-shockwave-flash’ style=’width:560px; height:350px;’ data=’http://www.youtube.com/v/" + VidID1 + "&hl=en&fs=1&’><param name=’movie’ value=’http://www.youtube.com/v/" + VidID1 + "&hl=en&fs=1&’ /></object>");
return false;
});
})
</script>
The CSS
#YouTubeContainer { width: 560px; font-family:Arial, Helvetica, sans-serif; }
#YouTubeContainer h5 { width: 540px; padding:10px; background:#ececec; margin:0; font-size:20px; }
ul#YouVid, ul#YouVid li { list-style:none; padding:0; margin:0; }
ul#YouVid li { padding:10px; float:left; width:120px; text-align:center; display:block; background:#ececec; min-height:140px; }
ul#YouVid li:hover { background:#ccc; cursor:pointer; }
ul#YouVid li.YouTubeSelect { border-bottom:2px solid #666666; min-height:138px; }
ul#YouVid li img { padding:0 0 10px 0; }
ul#YouVid li small { display:block; }
The HTML
You can change the order of the H5, UL and Div as long as they’re all in the YouTubeContainer Div
Give the List Item the ID of the youtube video found in the URL, type the title you’d like to show in the List Item
You can give the List Item Video you’d like to show up as default a class of “Selected”
<div id="YouTubeContainer">
<h5 id="YouVidTitle"></h5>
<div id="YouTubeBox">
Youtube Video loads in here – alternatively you can place a link to your youtube page so people can still see a link if javascript is disabled
</div>
<ul id="YouVid">
<li id="BpWM0FNPZSs" class="Selected" >DEADLINE post-it stop motion</li>
<li id="vS2sc9-4UaI" >7×7x7 Stop Motion Assembly!!</li>
<li id="qBjLW5_dGAM" >Western Spaghetti by PES</li>
<li id="o1GyJpnTN1I" >Sweet Dreams by Kirsten Lepore</li>
</ul>
<br clear="all" />
</div>
