Вью для видео

view_video.php

<link rel="stylesheet" href="/static/js/fancybox-1.3.1/jquery.fancybox-1.3.1.css" media="screen" type="text/css" />

<script type='text/javascript' src='/static/js/jquery.js'></script>
<script type='text/javascript' src='/static/js/fancybox-1.3.1/jquery.fancybox-1.3.1.js'></script>


<script type='text/javascript'>
$(document).ready(function(){
    $('#main-video-block #preview_texts a').mouseenter(function () {
        if (!$(this).hasClass('current')) {
            var n = $('#main-video-block #preview_texts a').index($(this)),
            videos = $('#main-video-block .video a'),
            sel = videos.eq(n);

        $(this).siblings().removeClass('current').end().addClass('current');

        sel.css('zIndex', 10).animate({
            opacity: 1}, 300, function () {
                videos.not(sel).animate({opacity: 0}, 1).end().css('zIndex', '');
            });
           }
         });



    $("a[rel=video]").click(function() {
        $.fancybox({
            'padding' : 0,
            'autoScale' : true,
            'transitionIn' : 'none',
            'transitionOut' : 'none',
            'title' : this.title,
            /*
            'width' : 760,
            'height' : 512,
            */
            'overlayShow' : false,
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type' : 'swf',
            'swf' : {
            'wmode' : 'transparent',
            'allowfullscreen' : 'true'
        }
    });
    return false;
    });
});
</script>
<style type="text/css">
#main-video-block
{
width: 620px;
}

.video
{
height: 240px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
width: 300px;
float: right;
margin-right: 8px;
position: relative;
z-index: 2;
}

.video a {
display: block;
height: 300px;
left: 0px;
position: absolute;
width: 300px;
}

#preview_texts
{
height: 300px;
float: left;
position: relative;
width: 310px;
z-index: 3;
}

#preview_texts a
{
display: block;
min-height:20%;
font-size: 14px;
text-decoration: none;
margin-bottom: 1px;
background: #ccc;
}



#preview_texts a p
{
margin: 0px;
padding: 3px;
}

#preview_texts span
{
font-weight: bold;
color: red;
}

#preview_texts .current
{
    background: url("/static/img/right.png") no-repeat scroll transparent;
    background-position: right center;
    width: 347px;
    z-index: 1000;
}

.video i {
    background: url("/static/img/play-btn-big.png") no-repeat scroll center center transparent;
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: -39px;
    width: 100%;
    z-index: 999;
}
</style>
<div id="main-video-block">
<div class='video'>
<?
if (!isset($previews))
{
    $previews = array();
    for ($q = 1; $q<5; $q++)
    {
        $previews[] = $preview;
    }
}
$this->load->helper("form");
foreach($previews as $preview)
{
    echo '<a href="http://www.youtube.com/watch?v='.$preview['video'].'" rel="video" title="'.form_prep($preview['name']).'">';
    echo '<i></i><img width="300px" height="240px" src="'.$preview['image'].'"/>';
    echo '</a>';
}
?>
</div>
<div id='preview_texts'>
<?
foreach($previews as $preview)
{
    echo '<a href="#"><p><span>'.$preview['date'].'</span> '.$preview['name'].'</p>';
    echo '<div class="clear"></div></a>';
}
?>
</div>
</div>