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

<!-- Watch Video Template $Id$ -->
{$object_type='video'}
{$type='v'}

<h1>{$video.title}</h1>

<div class="row">
    <div class="span734">
        <!-- Video Player -->
        <div style="width: 100%; background-color: #ccc; height: 336px">
            {FlashPlayer width='100%' height='336px'}
        </div>
        
        <!-- Video Stats and Actions -->
        
        <div class="video-stats">
            <div class="inlineblock pull-left">
                <div class="btn-toolbar">
                    <div class="btn-group valignMid">
                        <button class="btn" 
                            onclick="cbv3rate('{$video.videoid}','1','video');"><span class="icon-like"></span> Like</button>
                        <button class="btn"
                            onclick="cbv3rate('{$video.videoid}','10','video');"><span class="icon-dislike"></span></button>
                    </div>
                    <button class="btn" onclick="toggleBox(this,'#add-videos-to-playlist');" ><span class="icon-plus" ></span>{lang code='Add to'}</button>
                    <button class="btn"><span class="icon-share"></span> Share</button>
                    <button class="btn"><span class="icon-flag"></span> Flag</button>
                </div>
            </div>
            
            <div class="inlineblock pull-right ">
                <div class="btn-toolbar valignMid">
                    <h3 class="inlineblock valignTop">{$video.views|number_format} views</h3>
                    <button class="btn"><span class="icon-v3 icon-stats"></span></button>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        
        <!-- Playlists -->
        {include_template_file file='blocks/add_playlist.html' video=$video type=v oid=$video.videoid}
        
        <!-- Video Details -->
        <div class="video-details row-fluid">
            <div class="span9">
                <div style="height: 60px ;overflow: hidden" id="vid-details" class="relative">
                    <h6>uploaded {$video.date_added|niceTime} by {$video.username}</h6>

                    <article><p>
                        {$video.description}</p>
                    </article>

                    <h5>Category</h5>
                        <h6>{$vdo.category|categories:video}</h6>
                    <h5>Tags</h5>
                        <h6>{$vdo.tags|tags:videos}</h6>
                        
                        <div class="height10"></div>
                        <div  class="video-details-shadow absolute"></div>
                </div>
                
                <div class="height5"></div>
                
                <div align="center">
                
                <div class="btn btn-info btn-mini width75" 
                     id="vid-details-more" onclick="toggleLessMore('vid-details','more');">
                    More</div>
                <div class="btn btn-mini display-none width75"
                     id="vid-details-less"  onclick="toggleLessMore('vid-details','less');">Less</div>
                </div>
                
            </div>
            
            <div class="span3">
                
                {* This is a custom function for this template *}
                
                <div id="video-rating-container">
                    {$videoRating=cbv3_rating($video,'video-bar')}
                    {$videoRating}
                </div>
                
            </div>
            
        </div> <!-- Ending Video Details -->
        <div class="clearfix"></div>
        
        <!-- Related Photos -->
        <div class="related-photos">
            <h3>Photos you may like</h3>
            
            <ul class="thumbnails">
                {section name=foo loop=4} 
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/150x120" alt="">
                    </a>
                </li>
                {/section}
            </ul>
        </div>
        
        <!-- Video Response -->
        <div class="video-response">
            <h3>Video Responses</h3>
            <ul class="thumbnails">
                {section name=foo loop=4} 
                <li>
                    <a href="#" class="thumbnail">
                        <img src="http://placehold.it/150x120" alt="">
                    </a>
                </li>
                {/section}
            </ul>
        </div>
        
        <!-- Add Comment -->
        <div class="comments video-comments">
            <h3>All Comments (<span id="total_comments">{$video.comments_count}</span>)</h3>
            
            <form id="comment-form" method="post" onsubmit="return false;">
                <input type="hidden" name="type" value="v"/>
                <input type="hidden" name="obj_id" value="{$video.videoid}"/>
                
            <div class="add-comment row-fluid relative">
                <div  class="inlineblock moveL marginR10 add-comment-uphoto">
                    <img src="{$userquery->avatar($userquery->udetails)}"/>
                </div>
                <textarea class="input-xlarge span650
                comment-textarea" id="comment-text" rows="3" name="comment"
                    {if userid()} placeholder="{lang code='type something to comment....'}"{else}
                    disabled{/if}
                ></textarea>
                
                <input name="reply_to" value="" type="hidden" id="reply_to" />
                
                {if !userid()}
                <div class="absolute comment-login"><a href="" class="btn">Please login to make a comment</a></div>
                {/if}
                
                <div class="clearfix"></div>
                
                
                
                <div class="inlineblock moveL marginL70 display-none"  >
                    <a href="javascript:void(0)" class="label label-info" id="reply-author"  onclick="cancel_reply()"></a>
                    
                </div>
                
                <div align="right" class="inlineblock moveR">
                    
                    <button class="btn btn-primary">Add video response</button>
                    <button class="btn" onclick="add_comment('v')"
                            data-loading-text="{lang code='Adding comment..'}"
                                id="add-comment-button">Post comment</button>
                </div>
                
                <div class="clearfix"></div>
            </div>
            </form>
            <div class="height20"></div>
            
            
            <div id="comments"></div>
            
            <script>
                $(document).ready(function()
                    {
                        comments_voting = '{$vdo.comment_voting}';	
                        get_comments('{$type}','{$vdo.videoid}','{$vdo.last_commented}',1,'{$vdo.comments_count}','{$object_type}')
                    }
                );
            </script>
            
            <div align="right">
                <div class="btn-group inlineblock">
                    {section name=foo loop=6}
                    <button class="btn">{$smarty.section.foo.iteration}</button>
                    {/section}
                    <button class="btn">Next &raquo;</button>
                </div>
            </div>
        </div>
    </div>

    <div class="span336">
        {sidebar('watch-video')}
    </div>
</div>

<div class="clearfix"></div>