diff --git a/modules/video_pro/_video_pro_widget1.html.erb b/modules/video_pro/_video_pro_widget1.html.erb
index e0253f6..48f54d3 100644
--- a/modules/video_pro/_video_pro_widget1.html.erb
+++ b/modules/video_pro/_video_pro_widget1.html.erb
@@ -1,40 +1,41 @@
 <div class="w-video_data video_data-widget-1">
+<h3 class="widget-title"><span>{{widget-title}}</span></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 data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
-          <div class="video_title"><h4>{{video_title}}</h4></div>
-          <div class="video_desc">{{video_desc}}</div>
+      
+      <div class="video_linkwrapper">
+      
+        <div class="videohover">
           <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>
+            <span>{{view_count}}</span>
           </div>
+          <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+          <div class="videoduration"></div>
         </div>
-      </a>
+        <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </a>
+      </div>
+        <div class="video_info">
+          <div class="video_length">{{video_duration}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+          <div class="video_keyword">{{video_keyword}}</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}}"><h4>{{video_title}}</h4></a></div>
+          <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
+        </div>
+
     </li>
   </ul>
   <div class="clearfix"></div>
   <style>
-    .video_data_wrap{
-      display: flex;
-      flex-wrap: wrap;
-    }
-    .video_group_time{
-      color: #4487cb;
-    }
-    .video_tag{
-      color: #e4374a;
-    }
-    .video_title h4{
-      font-size: 1.6em;
-      font-weight: bold;
-      margin-bottom: 0;
-      text-overflow: ellipsis;
+    .video_title h5{
+      @extend .i-title;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
       overflow: hidden;
-      white-space: nowrap;
+      text-overflow: ellipsis;
     }
     .view_info{
       float: right;
@@ -43,4 +44,7 @@
       margin-right: 5px;
     }
   </style>
-</div>
\ No newline at end of file
+</div>
+<script>
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget2.html.erb b/modules/video_pro/_video_pro_widget2.html.erb
new file mode 100644
index 0000000..49c8185
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget2.html.erb
@@ -0,0 +1,59 @@
+<div class="w-video_data video_data-widget-2">
+<h3 class="widget-title"><span>{{widget-title}}</span></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  href="{{video_show_url}}" title="{{video_title_escape}}">
+        <div class="video_linkwrapper">
+          <div class="videohover">
+            <div class="view_info">
+              <span>{{view_count}}</span>
+            </div>
+            <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+            <div class="videoduration"></div>
+          </div>
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
+        </a>
+        
+        <div class="video_info">
+          <div class="video_length">{{video_duration}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+          <div class="video_keyword">{{video_keyword}}</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}}"><h4>{{video_title}}</h4></a></div>
+          <div class="video_desc"><a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">{{video_desc}}</a></div>
+        </div>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+</div>
+<style>
+
+.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 () {
+#   $(".video_keyword").each(function () {
+#     $(this).insertAfter($(this).siblings(".video_tag").find(".video_tags2"));
+#   });
+# });
+
+
+
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget3.html.erb b/modules/video_pro/_video_pro_widget3.html.erb
new file mode 100644
index 0000000..246ac98
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget3.html.erb
@@ -0,0 +1,101 @@
+<div class="w-video_data video_data-widget-3">
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
+<div class="btnwrapper" style="position: absolute;top: 50%;width:100%;    z-index: 101;">
+  <button id="prev-{{subpart-id}}" class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;
+    color: #909090;
+    background: #fff;
+    border-radius: 50%;
+    border: none; z-index: 2;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
+  <button id="next-{{subpart-id}}" class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;
+    color: #909090;
+    background: #fff;
+    border-radius: 50%;
+    border: none; z-index: 2;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
+</div>
+  <ul class="video_data_wrap col-sm-12 cycle-slideshow" data-list="videos" data-level="0" data-cycle-fx="carousel"
+  data-cycle-timeout="0"
+  data-cycle-carousel-visible="3"
+  data-cycle-carousel-fluid="true"
+  data-cycle-next="#next-{{subpart-id}}"
+  data-cycle-prev="#prev-{{subpart-id}}"
+  data-cycle-slides=".video_data"
+  >
+  <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  href="{{video_show_url}}" title="{{video_title_escape}}">
+    <div class="video_linkwrapper">
+      <div class="videohover">
+        <div class="view_info">
+          <span>{{view_count}}</span>
+        </div>
+        <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+        <div class="videoduration"></div>
+      </div>
+      <img class="video_snapshot" src="{{snapshot_url}}"/>
+    </div>
+    
+    <div class="video_info">
+      <div class="video_length">{{video_duration}}</div>
+      <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+      <div class="video_keyword">{{video_keyword}}</div>
+      <div class="video_group_time">{{video_postdate}}</div>
+      <div class="video_title"><div class="video_link"><h4>{{video_title}}</h4></div></div>
+      <div class="video_desc"><div class="video_link">{{video_desc}}</div></div>
+    </div>
+  </a>
+</li>
+  </ul>
+  <div class="clearfix"></div>
+<style>
+
+  .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;
+  }
+  .view_info{
+    max-height: 100%;
+    border-radius: 2px;
+    font-size: 0.875rem;
+    font-weight: normal;
+    letter-spacing: 0.3px;
+    text-align: center;
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    position: absolute;
+    padding: 0px 8px;
+    background-color: #000000cc;
+    color: rgb(255, 255, 255);
+    z-index: 10;
+    top: 10px;
+    left: 10px;
+    border: 1px solid transparent;
+    line-height: 1.45;
+    span{
+      color:#fff;
+    }
+    &:before{
+      content: "";
+      display: inline-block;
+      margin-right: 5px;
+      width: 14px;
+      height: 10px;
+      background: url(/assets/icon-view@2x.png) no-repeat;
+      position: relative;
+      background-size: contain;
+    }
+  }
+</style>
+</div>
+<script>
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget4.html.erb b/modules/video_pro/_video_pro_widget4.html.erb
new file mode 100644
index 0000000..e2a87e8
--- /dev/null
+++ b/modules/video_pro/_video_pro_widget4.html.erb
@@ -0,0 +1,47 @@
+<div class="w-video_data video_data-widget-4">
+<h3 class="widget-title"><span>{{widget-title}}</span></h3>
+  <ul class="video_data_wrap row container" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-3" 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_linkwrapper">
+          <div class="videohover">
+            <div class="view_info">
+              <span>{{view_count}}</span>
+            </div>
+            <div class="Video__Player"><div class="Video__PlayerButton"></div></div>
+            <div class="videoduration"></div>
+          </div>
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+        </div>
+        <div class="video_info">
+          <div class="video_length">{{video_duration}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div class="video_tags2">{{video_tag}}</div></div>
+          <div class="video_keyword">{{video_keyword}}</div>
+          <div class="video_group_time">{{video_postdate}}</div>
+          <div class="video_title"><div class="video_link"><h4>{{video_title}}</h4></div></div>
+          <div class="video_desc"><div class="video_link">{{video_desc}}</div></div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .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>
+</div>
+<script>
+
+</script>
\ No newline at end of file
diff --git a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
index baf2cdb..d8211ef 100644
--- a/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
+++ b/modules/video_pro/_video_pro_widget_jqcloud1.html.erb
@@ -20,7 +20,7 @@
     container_{{subpart-id}}.on('wordcloudstop', function (e) {
       $(this).children('span').each(function (i, v) {
         var text = $(this).html();
-        $(this).html('<a title="'+ list_{{subpart-id}}[i][0] + '" style="color: inherit" href="' + list_{{subpart-id}}[i][2]  +'">' + text + '</a>');
+        $(this).html('<a class="wordcloud-link" title="'+ list_{{subpart-id}}[i][0] + '" style="color: inherit" href="' + list_{{subpart-id}}[i][2]  +'">' + text + '</a>');
       });
     });
     function wordCloud_{{subpart-id}}(){
@@ -30,7 +30,7 @@
       WordCloud(container_{{subpart-id}}[0], {
         list: list_{{subpart-id}},
         gridSize: 3,
-        weightFactor: jqcloud_words_{{subpart-id}}.length * Math.min(width, 1200) / 770,
+        weightFactor: jqcloud_words_{{subpart-id}}.length * Math.min(width, 1200) / 770 * 1.5,
         rotateRatio: 0,
         shuffle: false,
         drawOutOfBound: false,
@@ -48,3 +48,6 @@
     });
   </script>
 </div>
+<style>
+
+</style>