Basic video selection panel

HTML

<div class="wrapper">
  <ul>
    <li><a title="video 1" data-video="http://www.youtube.com/embed/X0DeIqJm4vM">Motherlover</a>
    </li>
    <li><a title="video 2" data-video="http://www.youtube.com/embed/GI6CfKcMhjY">Jack Sparrow</a>
    </li>
    <li><a title="video 3" data-video="http://www.youtube.com/embed/TcK0MYgnHjo">Ras trent</a>
    </li>
    <li><a title="video 4" data-video="http://www.youtube.com/embed/8yvEYKRF5IA">Boombox</a>
    </li>
    <li><a title="video 5" data-video="http://www.youtube.com/embed/6_W_xLWtNa0">Shy Ronnie 2</a>
    </li>
  </ul>
  <iframe id="videoArea" width="350" height="250" src="http://www.youtube.com/embed/X0DeIqJm4vM" frameborder="0" allowfullscreen></iframe>
</div>

CSS

ul {
  width: auto;
  display: inline;
  left: 0;
  top: 0;
  padding: 10px;
  margin: 0;
}

ul li {
  display: block;
  border-radius: 3px;
  background: #000;
  color: #fff;
  width: 120px;
  padding: 10px;
  margin: 2px 0;
}

ul li a {
  display: block;
  background: #fff;
  color: #000;
  text-decoration: none;
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #333;
  text-align: center;
  font: bold 14px Helvetica;
  pointer: cursor;
}

ul li a:active,
ul li a:hover,
ul li a.active {
  background: #333;
  color: #fff;
  border: 1px solid #fff;
}

.wrapper {
  position: relative;
  width: 600px;
  background: #000;
  border-radius: 3px;
  margin: 30px auto;
  box-shadow: 1px 1px 5px 5px #999;
  border: 1px solid #000;
  padding: 30px;
}

#videoArea {
  width: 350px;
  height: 250px;
  right: 20px;
  top: 20px;
  position: absolute;
  padding: 30px;
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px 5px #fff;
}

JavaScript

/* http://stackoverflow.com/questions/16317853/how-to-show-one-of-five-videos-at-same-location-after-specific-link-selection/16318084#16318084 */
var initVideos = function() {
  var videoArea = $("#videoArea"),
    divs = $("ul li a"); // or some other selector for your HTML

  // bind your hover event to the divs
  divs.click(function(ev) {
    ev.preventDefault();
    videoArea.prop("src", $(this).data('video'));
    divs.removeClass("active");
    $(this).addClass("active");
  });
};

// once the DOM is ready
$(function() {
  initVideos();
});