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

<div class="i-video_data video_data-index-3 video_data-modal-view">
  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body video_goes_here">
        </div>
      </div>
    </div>
  </div>
  <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="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
        <div class="video_snapshot_wrap">
          <img class="video_snapshot" src="{{snapshot_url}}"/>
          <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
        </div>
        <div class="video_info">
          <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
          <div class="video_title"><h4>{{video_title}}</h4></div>
          <div class="video_desc">{{video_desc}}</div>
        </div>
      </a>
    </li>
  </ul>
  <div class="clearfix"></div>
  <style>
    .video_data_wrap{
      display: flex;
      flex-wrap: wrap;
    }
    .video_title h4{
      font-size: 1.1em;
      font-weight: bold;
      margin-bottom: 0;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .video_snapshot_wrap {
      position: relative;
    }
    .video_data-modal-view .modal-dialog {
      width: 80%;
    }
    .video_data-modal-view .play_icon {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 55px;
    }
  </style>
  <script>
    $(".video_data-modal-view .video_link").off('click').on('click', function(){
      var _this = $(this);
      var modal_window = _this.parents('.video_data-modal-view').find('.modal');
      if(modal_window.length != 0){
        var api_url = _this.data('api-url');
        $.get(api_url).done(function(html){
          modal_window.find('.video_goes_here').html(html);
          modal_window.modal('show');
        })
      }
    })
  </script>
</div>
{{pagination_goes_here}}