clipbucket/upload/styles/cb_27/layout/watch_video.html

{$video=$vdo}
{$type='video'}
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 player">
            <div class="cb-box pad-bottom-sm">
                <div id="cb_player" class="no-pad">
                    {FlashPlayer vdetails=$video width='100%' height='100%'}
                </div>
                <!-- cb_player end -->

                <div class="watch-vid-title mbl">
                    <h1>{wordwrap($video.title,8,"\n", true)}</h1> 
                </div>
                <!-- watch-vid-title end -->

                <div class="vid-detail-sec">
                    <div class="watch-vid-thumb">    
                        <img src="{$userquery->avatar($video)}" class="img-circle"/>
                    </div> 
                    <div class="watch-vid-user-sec">
                        <div class="watch-vid-user-name">
                            <a href="{$userquery->profile_link($video)}">{$video.username}</a>
                        </div>
                        {if !$video.username}
                        <a id="subscribeUser" class="btn btn-xs btn-primary">
	                    {lang('Subscribe')}
	                    </a>{/if}
                    </div>
                    <div class="watch-vid-rating-sec">
                        <div class="watch-vid-rating-view">
                            {$vdo.views|number_format}
                            <span class="small" style="font-size:18px;">{lang('view')}{if $vdo.views > 1}{lang('s')}{/if}</span>
                        </div>
                        <div class="watch-vid-thumbsupdown-sec" id="rating_container">
                            {show_video_rating  rating=$vdo.rating ratings=$vdo.rated_by total='10' id=$vdo.videoid type=video}
                        </div>    
                    </div>         
                </div>
                <!-- vid-detail-sec end -->

                <div class="cb-item-desc-container">

                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#cb-item-info" data-toggle="tab">{lang('Info')}</a>
                        </li>
                        <li>
                            <a href="#cb-item-share" data-toggle="tab">{lang('Share')}</a>
                        </li>
                        <li>
                            <a href="#cb-item-addto" data-toggle="tab">{lang('Add to')}</a>
                        </li>
                        <li>
                            <a id="reportVideo" href="#cb-item-report" data-toggle="tab">{lang('Report')}</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="cb-item-info">
                            <div class="col-lg-9 col-md-9 col-sm-9 col-xs-6 no-padding">

                            	<p id="videoDescription">{description($video.description)}</p>
                                <div class="watch-vid-tag">
                                    <strong class="pull-left">{lang('Category:')}</strong>
                                    <h1 class="pull-left mls">{$vdo.category|categories:video}</h1>
                                </div>
                                <div class="watch-vid-catg">
                                    <strong class="pull-left">{lang('Tags:')}</strong>
                                    <h2 class="pull-left mls">{$vdo.tags|tags:videos}</h2>
                                </div>

                                <!-- view sec hide on told arslan bhai -->
                                <!-- <div class="mtm">
                                        <strong>{lang code='views'}</strong> : {$vdo.views|number_format} &ndash;
                                        <strong>{lang code='duration'}</strong> : {$vdo.duration|SetTime} &ndash;
                                        <strong>{lang code='comments'}</strong> : {$vdo.comments_count|number_format}
                                </div> -->

                        	</div>

                            <div class="watch-vid-social-sec">
                                <a class="cb-item-social-icon twitter" href="https://twitter.com/share" target="_blank">
                                    <i class="fa fa-twitter"></i>
                                </a>
                                <a class="cb-item-social-icon googlep" href="https://plus.google.com/share?url={urlencode(videolink($video))}" target="_blank">
                                    <i class="fa fa-google-plus"></i>

                                </a>
                                <a class="cb-item-social-icon facebook" href="http://www.facebook.com/sharer/sharer.php?s=100&p[url]={videoLink($video)|urlencode}&p[images][0]={get_thumb vdetails=$video}&p[title]={$video.title|title|urlencode}&p[summary]={$video.description|description|urlencode}" target="_blank">
                                    <i class="fa fa-facebook"></i>
                                      
                                </a>
                            </div>           
                        </div>

                        <div class="tab-pane" id="cb-item-share">
                            {show_share_form id=$vdo.videoid type=video}
                        </div>

                        <div class="tab-pane" id="cb-item-addto">
                            <div class="clearfix visible-xs-block" style="margin-bottom:25px;">
                                <div id="video_action_result_cont" style="display:none;"></div>   
                                <a  class="btn mtm btn-block btn-primary" href="javascript:void(0)" onclick="add_to_fav('video','{$vdo.videoid}');" style="color:white;">Add to My Favorites</a>
                            </div>

                            <div class="alert ">
                            {show_playlist_form id=$vdo.videoid type=video}
                            </div>
                        </div>

                        <div class="tab-pane" id="cb-item-report">
                            {show_flag_form id=$vdo.videoid type=video}
                        </div>

                    </div>
                </div>
                <div class="clearfix"></div>
                <div id="messageFav" class="alert alert-info marginTop" style="display:none"></div>
            </div>
  
            <div id="test1"></div>
    		<div id="reply"> 
    		    <div class="cb-box pad-bottom">
                    <div  class="addComment clearfix">
                        <h3 >{lang('Comments')} 
                        <div class="com_count" id="com_count">{$vdo.comments_count}</div>
                        <!--{$vdo.comments_count}--></h3>
                        {if $myquery->is_commentable($vdo,'v')}
                            {include file="$style_dir/blocks/comments/add_comment.html" id=$vdo.videoid type=v}
                        {else}
                        <div class="alert alert-warning">{lang code='comm_disabled_for_vid'}</div>
                        {/if}
                    </div>
                   <div id="comments">
           <ul class="list-unstyled" id="userCommentsList"></ul></div>
    		    </div>
    		</div> 
        </div>
        
		<!--Side bar start--> 
        <div class="col-lg-4 col-md-4 visible-lg visible-md side-video pull-right">
            <div class="cb-box">
                 <div class="ad">{AD place='ad_320x250'}</div>
                <!-- <a href="http://www.arvixe.com/clipbucket_hosting?utm_campaign=300x250_Demo&utm_medium=banner&utm_source=clipbucket.com"><img class="banner" src="{$theme}/assets/images/add320x250.png" style="margin-bottom: 10px; width: 100%;" >
                </a>-->
                <h3>{lang code="Most Popular"}</h3>
                {foreach $videos as $video}
                 {include file="$style_dir/blocks/videos/video_popular.html"}
                {/foreach}
            </div>
        </div>
        <!-- /Side bar-->
	</div>
</div>

<div style="height:20px"> </div>
<script>
    //var aspect_ratio = 1.77778
    var aspect_ratio = 2.2
    var $cb_player = $("#cb_player");

    $(document).ready(function(){
        $cb_player.height( $cb_player.width() / aspect_ratio );

        var videoInfo = $("#videoDescription").text();
        var newInfo = videoInfo.replace(/(((https?:\/\/)|([\s\t]))(www.)?([a-z0-9]+)\.[a-z]+)/g, '<a href="$1">$1</a>');
        $("#videoDescription").html(newInfo);

        comments_voting = '{$vdo.comment_voting}';
        _cb.getAllComments(
            '{$type}',
            '{$vdo.videoid}',
            '{$vdo.last_commented}',1,
            '{$vdo.comments_count}',
            '{$object_type}'
        );


        // $('.cb-item-description').readmore({
        //     speed: 75,
        //     maxHeight: 120,
        //     moreLink : '<a href="#" class="btn btn-min btn-block btn-primary"><i class="glyphicon glyphicon-arrow-down"></i> {lang("Read more")}</a>',
        //     lessLink : '<a href="#" class="btn btn-min btn-block btn-default">{lang("Close")}</a>'
        // });
        $("#reportVideo").on({
            click : function(e){
                e.preventDefault();
                $("#flag_item").show();
            }
        });

        $("#subscribeUser").on({
            click: function(e){
                e.preventDefault();
                _cb.subscribeToChannel('{$video.userid}','subscribe_user','video_detail_result_cont');
            }
        });
    });

    var resizePlayer =  _cb.debounce(function() {
        $cb_player.height( $cb_player.width() / aspect_ratio );
    }, 500, false);

    $(window).resize(resizePlayer);

</script>

<style type="text/css">
footer{
     position: relative;
    top: 65px;
}
</style>