Morrow Studios – personal site of Chris Morrow, Interactive Developer

While working on my current contract I ran across a great jQuery plugin for adding a YouTube playlist to your site, while maintaining SEO and compliant code using a simple unordered list. You can get the plugin from GeckoNewMedia.

HTML Code is below

<div class="yt_holder">
<h3>YouTube-Playlist</h3>
<div  id="ytvideo"></div>
<ul class="videos">
  <li class="first"><a title="This is a video long description..." 
href="http://www.youtube.com/watch?v=OtF1JFNfCug">Funny Crashes</a>
        </li>
  <li><a href="http://www.youtube.com/watch?v=bI7AUgp5fPI">Prank Wars</a></li>
  <li><a href="http://www.youtube.com/watch?v=Xgls9IwWUyU">Apple "i"</a></li>
</ul>
</div>

<!-- end yt_holder -->

CSS Code is below

.clearfix { zoom:1; }
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#ytvideo {
    float: left;
    margin-right:10px;
    padding-right: 10px;
    border-right: solid 1px #999;
}

.yt_holder {
    background: #ccc;
    padding: 0 10px 10px;
    border: 1px solid #e3e3e3;
    margin-bottom:15px;
}

.yt_holder h3 {
  margin:0; padding:5px 0; background: #ccc; font-weight:bold;
}

.yt_holder ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 75px;
}

.yt_holder ul li {
    list-style-type: none;
    display:block;
    float: left;
    width: 130px;
    overflow:hidden;
}

.yt_holder ul li img {
    display:block;
    width: 97px;
    border: 1px solid #999;
}
.yt_holder ul li a {
    padding: 5px 2px 5px 5px;
    text-decoration: none;
    display: block;
    color: #000;
    font-family:Arial;
    font-size:11px;
    border-top: solid 1px #999;
    background:#e0e0e0;
}
.yt_holder ul li a:hover { background:#fff; color:#e4721c; }

.yt_holder ul li.first a {border: none; }

body .yt_holder ul li.currentvideo a {
  background:#fff; font-weight:bold; color:#e4721c;
}