🧪 影片播放器佈局測試(6 種方法)
手機 + 桌機都看,看哪個方法的影片有正常顯示且可水平捲動。寫下哪個 work 給 Claude。
方法 A:Flexbox 水平捲動
用 display:flex + overflow-x:auto,影片橫向排列、可滑動。最簡單、相容性高。
⬆️ 預期:左右滑動可看 2 支影片(行動端尤其明顯)
方法 B:Flexbox + Scroll Snap
在 A 的基礎上加 scroll-snap-type,滑動時影片自動對齊置中。現代瀏覽器支援好。
⬆️ 預期:滑動時影片會自動對齊置中
方法 C:CSS Grid 水平
用 grid-auto-flow:column,跟 Flexbox 類似但用 Grid 語法。某些 SHOPLINE 主題對 Grid 處理不同。
⬆️ 預期:跟 A 類似,左右滑動
方法 D:inline-block(古老兼容)
用 inline-block + white-space:nowrap,IE 時代寫法但相容性最高,SHOPLINE 老編輯器幾乎都接受。
⬆️ 預期:跟 A/C 類似,但用最古老的 CSS 寫法
方法 E:YouTube Playlist 單一 iframe
把多支影片做成一個 YouTube Playlist(免費、5 分鐘設定),用單一 iframe 嵌入,使用者可在播放器內點 Next/Prev 切換。最簡單、SHOPLINE 100% 接受(只是單一 iframe)。
⚠️ 下面用了 佔位 playlist ID(`PLrAXtmErZgOeiKm4sgNOknGvNjby9efdf`),要把它換成你 YouTube 帳號裡建好的 playlist ID。
⬆️ 預期:單一播放器、含 Next/Prev 按鈕(playlist ID 要換成真的)。如果顯示「找不到影片」,代表 playlist ID 是占位、要換真的。
方法 F:傳統垂直堆疊(現有版本對照)
這是 V2.1 目前的方式 — 兩支影片上下堆疊。用來對比上面 A-E 哪個視覺更好。
⬆️ 預期:兩支垂直堆疊,影片之間 6px 間距(就是現有 V2.1 規則)
📋 觀察清單(看完前台請記下)
- 方法 A(Flexbox):能不能左右滑?影片有正常顯示嗎?
- 方法 B(Scroll Snap):滑動時會自動對齊嗎?
- 方法 C(Grid):跟 A 類似還是有差?
- 方法 D(inline-block):會不會破版?
- 方法 E(Playlist):單一播放器有出現嗎?(需要先建 playlist)
- 方法 F(垂直、對照組):這個 100% work,用來對比視覺差異
📱 強烈建議手機看(行動端 vs 桌機顯示差異大、行動端是水平捲動的主要場景)
