.

Author: faikit

public/kai0-rl/assets/css/style.css

@@ -174,7 +174,7 @@ p{margin:10px 0}
 }
 .media video{width:100%; height:auto; display:block}
 .media.media-small{background:#fff; display:flex; align-items:center; justify-content:center; padding:10px}
-.media.media-small video.small-video{width:60%; max-width:720px; margin:0}
+.media.media-small video.small-video{width:60%; max-width:720px; margin:0; height: auto; object-fit: contain;}
 .grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
 .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
 @media (max-width:860px){ .grid2{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr} }
@@ -1470,3 +1470,111 @@ main .caption { opacity: 1 !important; }
     margin-top: 0;
   }
 }
+
+/* ===== WeChat Video Play Hint ===== */
+.video-play-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+  opacity: 1;
+  transition: opacity 0.3s ease;
+  z-index: 5;
+  backdrop-filter: blur(2px);
+}
+
+.video-play-overlay.hide {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.video-play-btn {
+  width: 80px;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+  transition: all 0.3s ease;
+}
+
+.video-play-overlay:hover .video-play-btn {
+  transform: scale(1.1);
+  background: rgba(255, 255, 255, 1);
+}
+
+.video-play-btn::after {
+  content: '';
+  width: 0;
+  height: 0;
+  border-left: 24px solid #1a73e8;
+  border-top: 14px solid transparent;
+  border-bottom: 14px solid transparent;
+  margin-left: 6px;
+}
+
+/* Hero video wrapper needs position relative */
+.hero-video {
+  position: relative;
+}
+
+/* Media wrappers need position relative for overlay */
+.media {
+  position: relative;
+}
+
+/* Smaller play button for smaller videos */
+.media .video-play-btn {
+  width: 60px;
+  height: 60px;
+}
+
+.media .video-play-btn::after {
+  border-left: 18px solid #1a73e8;
+  border-top: 11px solid transparent;
+  border-bottom: 11px solid transparent;
+  margin-left: 4px;
+}
+
+/* Even smaller for carousel */
+.carousel-card .video-play-btn {
+  width: 50px;
+  height: 50px;
+}
+
+.carousel-card .video-play-btn::after {
+  border-left: 15px solid #1a73e8;
+  border-top: 9px solid transparent;
+  border-bottom: 9px solid transparent;
+  margin-left: 3px;
+}
+
+/* ===== 修复视频封面黑边问题 ===== */
+video {
+  object-fit: cover;
+  background-color: #000;
+}
+
+/* 确保视频填充满容器 */
+.media video,
+.video-wrapper video,
+.hero-video video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* 小视频特殊处理 - 完整显示封面不裁剪 */
+.media.media-small video.small-video {
+  height: auto !important;
+  object-fit: contain !important;
+  background-color: transparent !important;
+}