CSS 小技巧

CSS小技巧 如何讓食譜卡YouTube在行動裝置響應完整寬度

Bygrandia

Recipe Card Blocks by WPZOOM 是一款食譜卡plugin，即使不付費也能享受許多強大的功能，尤其對食譜作者來說，是不錯的選擇。

不過，不知為何，Recipe Card Blocks嵌入YouTube後，在行動裝置（Mobile）上卻無法正常響應（Responsive）完整寬度，而是被裁剪一半，也就是說嵌入的YouTube，在行動裝置上是顯示桌面裝置的版本。

問過官方，一直沒有答案，也看到不少使用者發問相關問題。本來想放棄嵌入YouTube，但對SEO來說並不好，然後我在茫茫網絡中找到了解決方案。

Sample

.recipe-card-video iframe {
  width: 100% !important; 
  height: 100%  !important;
}

!important 在CCS語法是重大宣告的意思，如果樣式表（Style sheet）中有多個相同的選取項（Selector） ，通常會以最後出現的為準，而把!important 加在分號前，就可改變遊戲規則（宣告權重），使width和height在附加的CSS上有優先權。

如此一來，無論是桌面裝置或行動裝置，都能響應100%完整寬度。

可是，上面的小技巧，我卻發現對於 iframe 來說無濟於事。在行動裝置顯示正常，但桌面裝置的高度顯示就會變得很可笑，突然變成小矮人，即使設置 height：auto ，也是兩頭不到岸。後來，我找到另一完美方法。

Sample

.recipe-card-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.recipe-card-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

只要用absolute position包住video，就能在不同寬度上顯示合理的高度。

參考資料
Fluid Width Video | CSS-Tricks (css-tricks.com)

grandia

來自冥王星的天蠍座，卻流著雙魚座的血。

一個甚麼都不會的平凡人，最擅長的事情就是宅在家，足不出戶。

Similar Posts