Вью для видео

view_video.php

<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'>
$(function(){
    
 $('#main-top-news .mind a[class!="button"]').mouseenter(function () {
            if (!$(this).hasClass('current')) {
                var n = $('#main-top-news #preview_texts a').index($(this)),
                    videos = $('#main-top-news .video a'),
                    sel = videos.eq(n);
                $(this).siblings().removeClass('current').end().addClass('current');
                
                sel.css('zIndex', 10).animate({
                    left: 0
                    }, 300, function () {
                        videos
                            .not(sel).css('left', '').end()
                            .css('zIndex', '');
                    });
            }
        });

        $("a[rel=video]").click(function() {
            $.fancybox({
                    'padding'		: 0,
                    'autoScale'		: true,
                    'transitionIn'	: 'none',
                    'transitionOut'	: 'none',
                    'title'			: this.title,
                    'overlayShow'   : true, 
                    '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-top-news
{
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: -10px;
position: relative;
z-index: 2;
}

.video a {
display: block;
height: 300px;
left: -300px;
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:hover
{
background: #fff;
}

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

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

.current
{
background: #fff;
}
</style>
<div id="main-top-news" class="main block">
<div class='video'>
<?
$preview = array(
    "date" => "23.01.2012",
    "name" => "Промо-ролик форума, или интервью с участниками внешнеэкономического соглашения",
    "video" => "F07Y5nBtJZA",
    "image" => "/static/img/el-portfel.jpg"
);
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 '<img width="300px" height="240px" src="'.$preview['image'].'"/>';
    echo '</a>';
}
?>
</div>
<div id='preview_texts' class="mind">
<?
foreach($previews as $preview)
{
    echo '<a href="#"><p><span>'.$preview['date'].'</span> '.$preview['name'].'</p>';
    echo '<div class="clear"></div></a>';
}
?>
</div>
</div>