manyi/static/angular-mod/tpl/music.mtv.detail.html

<div class="wrapper-lg">
  <div class="row">
    <div class="col-sm-9">
      <div class="blog-post">                   
        <div class="panel no-border">
          <div>
            <videogular vg-theme="config.theme.url">
              <vg-video vg-src="video.sources">
              </vg-video>

              <vg-controls vg-autohide="video.plugins.controls.autoHide" vg-autohide-time="video.plugins.controls.autoHideTime">
                <vg-play-pause-button></vg-play-pause-button>
                <vg-timedisplay>{{ currentTime | date:'mm:ss' }}</vg-timedisplay>
                <vg-scrubBar>
                  <vg-scrubbarcurrenttime class="bg-info"></vg-scrubbarcurrenttime>
                </vg-scrubBar>
                <vg-timedisplay>{{ timeLeft | date:'mm:ss' }}</vg-timedisplay>
                <vg-timedisplay>{{ totalTime | date:'mm:ss' }}</vg-timedisplay>
                <vg-volume>
                  <vg-mutebutton></vg-mutebutton>
                  <vg-volumebar></vg-volumebar>
                </vg-volume>
                <vg-fullscreenButton></vg-fullscreenButton>
              </vg-controls>
              <vg-overlay-play></vg-overlay-play>
              <vg-poster-image vg-url='video.plugins.poster'></vg-poster-image>
              <vg-buffering></vg-buffering>
            </videogular>
          </div>
          <div class="wrapper-lg">
            <h2 class="m-t-none"><a href>Big Buck Bunny Trailer</a></h2>
            <div>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. 
              <br><br>
              Phasellus at ultricies neque, quis malesuada augue. Donec eleifend condimentum nisl eu consectetur. Integer eleifend, nisl venenatis consequat iaculis, lectus arcu malesuada sem, dapibus porta quam lacus eu neque.</p>
            </div>
            <div class="line line-lg b-b b-light"></div>
            <div class="text-muted">
              <i class="fa fa-user text-muted"></i> by <a href class="m-r-sm">Admin</a>
              <i class="fa fa-clock-o text-muted"></i> Feb 20, 2013
              <a href class="m-l-sm"><i class="fa fa-comment-o text-muted"></i> 2 comments</a>
            </div>
          </div>
        </div>
      </div>

      <h4 class="m-t-lg m-b">3 Comments</h4>
      <div>
        <div>
          <a class="pull-left thumb-sm">
            <img src="img/a0.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-info m-l-xs">Editor</label> 
              <span class="text-muted text-xs block m-t-xs">
                24 minutes ago
              </span>
            </div>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum.</div>
          </div>
        </div>

        <div class="m-l-xxl">
          <a class="pull-left thumb-sm">
            <img src="img/a1.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-dark m-l-xs">Admin</label> 
              <span class="text-muted text-xs block m-t-xs">
                26 minutes ago
              </span>
            </div>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
          </div>
        </div>

        <div>
          <a class="pull-left thumb-sm">
            <img src="img/a2.jpg" class="img-circle">
          </a>
          <div class="m-l-xxl m-b">
            <div>
              <a href><strong>John smith</strong></a>
              <label class="label bg-dark m-l-xs">Admin</label> 
              <span class="text-muted text-xs block m-t-xs">
                26 minutes ago
              </span>
            </div>
            <blockquote class="m-t">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <div class="m-t-sm">Lorem ipsum dolor sit amet, consecteter adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</div>
          </div>
        </div>

      </div>
      <h4 class="m-t-lg m-b">Leave a comment</h4>
      <form>
        <div class="form-group pull-in clearfix">
          <div class="col-sm-6">
            <label>Your name</label>
            <input type="text" class="form-control" placeholder="Name">
          </div>
          <div class="col-sm-6">
            <label >Email</label>
            <input type="email" class="form-control" placeholder="Enter email">
          </div>
        </div>
        <div class="form-group">
          <label>Comment</label>
          <textarea class="form-control" rows="5" placeholder="Type your comment"></textarea>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-success">Submit comment</button>
        </div>
      </form>
    </div>
    <div class="col-sm-3">
      <h5 class="font-bold">Recent Posts</h5>
      <div>
        <div>
          <a class="pull-left thumb thumb-wrapper m-r">
            <img src="img/b0.jpg">
          </a>
          <div class="clear">                        
            <a href class="font-semibold text-ellipsis">Bootstrap 3: What you need to know</a>
            <div class="text-xs block m-t-xs"><a href>Travel</a> 2 minutes ago</div>
          </div>
        </div>
        <div class="line"></div>
        <div>
          <a class="pull-left thumb thumb-wrapper m-r">
            <img src="img/b1.jpg">
          </a>
          <div class="clear">                        
            <a href class="font-semibold text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
            <div class="text-xs block m-t-xs"><a href>Design</a> 2 hours ago</div>
          </div>
        </div>
        <div class="line"></div>
        <div>
          <a class="pull-left thumb thumb-wrapper m-r">
            <img src="img/b2.jpg">
          </a>
          <div class="clear">                        
            <a href class="font-semibold text-ellipsis">Sed diam nonummy nibh euismod tincidunt ut laoreet</a>
            <div class="text-xs block m-t-xs"><a href>MFC</a> 1 week ago</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>