nfu-nfuosa/modules/video_pro/video_pro_index4.html.erb

<div class="i-video_data video_data-index-4">
    <h3 class="i-annc__page-title"><span>{{page-title}}</span></h3>
  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
    <li class="video_data 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}}">
      <div class="video_linkwrapper2">
        <div class="videohover">
          <div class="view_info">
            <span>{{view_count}}</span>
          </div>
          <div class="Video__Player"><button class="Video__PlayerButton"></button></div>
          <div class="videoduration"></div>
        </div>
        <img class="video_snapshot" src="{{snapshot_url}}"/>
      </div>
      <div class="video_info">
        <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
        <div class="video_group_time">{{video_postdate}}</div>
        <div class="video_title"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}"><h5>{{video_title}}</h5></a></div>
        <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
      </div>
      </a>
    </li>
  </ul>
  <div class="clearfix"></div>
  <style>
    .video_group_time{
      display: flex;
      align-items: center;
    }
    .video_tag{
          margin: 0.5em 0.5em 0.5em 0;
    }
    .video_data{
      margin-bottom: 1em;
      padding: 0 0.5em;
    }
    .video_info {
        margin: 1em 0;
    }
    .video_data_wrap{
      display: flex;
      flex-wrap: wrap;
    }
    .video_filter_area {
      margin-bottom: 20px;
    }
    #filter_category_box {
      width: 100%;
      line-height: 50px;
      height: 50px;
      max-width: none;
      border: none;
      padding: 0 1em;
    }
    .category_box {
      padding: 0;
    }
    .search_box {
      padding-right: 0;
    }
    @media (max-width: 767px){
      .search_box {
        padding: 0;
        margin-top: 0.5em;
      }
    }
    .search_keyword {
      margin-right: 50px;
    }
    .search_input input[type=text] {
      padding: 0 1em;
      line-height: 50px;
    }
    .search_input input {
      max-width: none;
      width: 100%;
      height: 50px;
      border: none;
    }
    .search_submit {
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: 100%;
    }
    .search_input input[type=submit] {
      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
      font-size: 0;
    }
    .video_tablist {
      overflow: hidden;
      letter-spacing: 0.1em;
      margin-bottom: 15px;
      padding: 0;
    }
    .video_tablist>li, .album_tablist>li {
      width: 50%;
      float: left;
    }
    .video_tablist li.now_view a {
      background-color: #c47f27;
    }
    .video_tablist a {
      display: block;
      padding: 10px 0;
      text-align: center;
      background-color: #8d681e;
      color: #fff;
      text-decoration: none;
      font-size: 120%;
    }
    .video_title h5 {
            @extend .i-title;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
    }
    .view_info {
      float: right;
    }
    .view_info img {
      margin-right: 5px;
    }
  </style>
  <script>

    $(document).ready(function () {
      var $select = $("#filter_category_box"); // 取得 select
      var $categoryBox = $(".category_box"); // 取得分類框

      // 創建按鈕並插入
      $select.find("option").each(function () {
        var value = $(this).val();
        var text = $(this).text();

        // 只處理有值的選項
        if (value) {
          var $btn = $('<button class="category-btn" data-value="' + value + '">' + text + '</button>');
          $categoryBox.append($btn);
        }
      });

      // 點擊按鈕時，更新 select 並觸發變更事件
      $(".category-btn").on("click", function () {
        var selectedValue = $(this).data("value");
        $select.val(selectedValue).trigger("change"); // 設定 select 值並觸發變更事件
      });

      // 隱藏原本的 select
      $select.hide();
      $('#filter_category_box').on('change', function(){
        $(this).prop('form').submit();
      })
    });

  </script>
</div>
{{pagination_goes_here}}