<div class="wVideoBlock">  
<a href="javascript://" onclick="$('.wTreiler').hide(); $('.wFilm').show(); $('#wFilm').css({'background':'#2a2a2c'}); $('#wTreiler').css({'background':'#656566'});" id="wFilm">Смотреть фильм</a>  
<a href="javascript://" onclick="$('.wFilm').hide(); $('.wTreiler').show(); $('#wTreiler').css({'background':'#2a2a2c'}); $('#wFilm').css({'background':'#656566'});" id="wTreiler">Трейлер</a>  
<a href="/index/14-1-0-1" id="wComplaint">Жалоба</a>  
<div class="wFilm">  
<iframe width="560" height="315" src="https://www.youtube.com/embed/-dB2PCegJR8" frameborder="0" allowfullscreen></iframe>  
</div>  
<div class="wTreiler">  
<iframe width="560" height="315" src="https://www.youtube.com/embed/qW29Ap9jJCY" frameborder="0" allowfullscreen></iframe>  
</div>  
</div>  

<style>  
.wVideoBlock {background:#2a2a2c; box-shadow:inset 0px 1px 0px #636569; padding:10px; width:560px; max-width:100%; position:relative; }  
#wFilm {background:#2a2a2c; color:#fff; display:table; width:auto; height:20px; padding:10px 15px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; position:absolute; top:-33px; left:0;}  
#wTreiler {background:#656566; color:#fff; display:table; width:auto; height:20px; padding:10px 15px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; position:absolute; top:-33px; left:130px;}  
#wComplaint {background:#ff6749; color:#fff; display:table; width:auto; height:15px; padding:7px 20px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:absolute; top:-33px; right:5px; opacity:0.7;}  
#wComplaint:hover {opacity:1.0;}  
.wFilm, .wTreiler {position:relative; padding-bottom:60%;}  
.wTreiler {display:none;}  
.wFilm embed, .wFilm iframe, .wFilm object, .wFilm video, .wTreiler embed, .wTreiler iframe, .wTreiler object, .wTreiler video {position: absolute; top:0; left:0; width:100%; height:100%;}  
</style>