Всем привет!
Помогите пожалуйста допилить код:
<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;
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 type="text/javascript">
$(function (){
$('#tab1').on(click,function(){
$('.block').innerHTML='<iframe width="560" height="315" src="http://www.youtube.com/embed/UMsr7qaz08o" frameborder="0" allowfullscreen></iframe>';
});
})
</script>
</body>
в данном виде при клике на картинку-превью видео открывается на полный экран, а нужно, чтобы оно открывалось внутри страницы как то, что есть в примере (вместо него)