taipei-light/modules/video_pro/video_pro_index1.html.erb

<div class="i-video_data video_data-index-1">
  <h3 class="i-annc__page-title">{{page-title}}</h3>
  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
        <img class="video_snapshot" src="{{snapshot_url}}"/>
        <div class="video_info">
          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
          <div class="video_category">{{video_category}}</div>
          <div class="video_title"><h4>{{video_title}}</h4></div>
          <div class="video_desc">{{video_desc}}</div>
          <div class="view_info">
            <span><img src="{{hd_icon_url}}" alt="HD"></span>
            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
          </div>
        </div>
      </a>
    </li>
  </ul>
  <div class="clearfix"></div>
  <style>
    .video_data_wrap{
      display: flex;
      flex-wrap: wrap;
    }
    .video_group_time{
      color: #4487cb;
    }
    .video_category{
      color: #e4374a;
    }
    .video_title h4{
      font-size: 1.6em;
      font-weight: bold;
      margin-bottom: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .view_info{
      float: right;
    }
    .view_info img{
      margin-right: 5px;
    }
  </style>
</div>
{{pagination_goes_here}}