drcrash,
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background: gray;
font-family: sans-serif;
}
.wrapper {
background: white;
margin: auto;
padding: 1em;
width: 50%;
}
h1 {
text-align: center;
}
ul.tabs {
list-style-type: none;
margin: 0;
margin-top: 1000px;
padding: 0;
}
ul.tabs li {
border: gray solid 1px;
border-bottom: none;
float: left;
margin: 0 .25em 0 0;
padding: .25em .5em;
}
ul.tabs li a {
color: gray;
font-weight: bold;
text-decoration: none;
}
ul.tabs li.active {
background: gray;
}
ul.tabs li.active a {
color: white;
}
.clr {
clear: both;
}
</style>
</head>
<body>
<section class="wrapper">
<h1>Simple Video Gallery with jQuery (beta)</h1>
<div class="clr"></div>
<section class="block">
<iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>
</section>
<ul class="tabs">
<li><a href="http://www.youtube.com/v/UMsr7qaz08o" id="tab1"><img src="http://i3.ytimg.com/vi/UMsr7qaz08o/default.jpg" /></a></li>
<li><a href="http://www.youtube.com/v/7myVThB3BMo" id="tab2"><img src="http://i3.ytimg.com/vi/7myVThB3BMo/default.jpg" /></a></li>
<li><a href="http://www.youtube.com/v/F2k_oySjtN8" id="tab3"><img src="http://i3.ytimg.com/vi/F2k_oySjtN8/default.jpg" /></a></li>
</ul>
<div class="clr"></div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
}(jQuery));
$(function (){
$('.tabs a').on('click',function(event){
event.preventDefault();
$('.block iframe').scrollTo(1200)[0].src = this.href;
});
})
</script>
</body>
</html>