[Blogger] 利用CSS讓Youtube影片在不同螢幕大小顯示適當的播放尺寸


很多人會在自己的網站上分享Youtube的影片,而在分享的時候,如果影片尺寸設的很大,那麼可能訪客在手機上看到的影片就會超出螢幕範圍,反過來說,若影片尺寸設的過小,那麼在桌機版上就顯得不夠清楚,用來解決這個問題的方法通常是會採用RWD的網頁設計,這樣就可以根據不同的尺寸螢幕做出適當的調整

根據我的經驗來看,目前很多的Templates其實都已經支援RWD設計,話雖如此,但必需要注意這些RWD設計的範本不一定對「影片」有做良好的設計,換句話說,它可能可以滿足「網頁」RWD的規範,但影片部分卻還是一如往常,沒有做進一步的做優化,所以很有可能在手機上看到的Youtube影片還是會超過螢幕,若你所用的Blogger範本也有此種問題,那麼可以參考以下的程式碼來解決

參考資料

程式碼

這個解決方式主要是採用CSS的 @media 屬性來達成,也幫大家找到了程式碼範例(來源):請先進入Blogger後台 → 「範本」 → 「編輯HTML」,然後將以下的代碼加到「</style>」或者「]]></b:skin>」之前,這樣就可以了囉

註:!important的作用為「強制提高優先權」,以下程式碼只是個通用的範例,一般情況下可以解決大部分的尺寸顯示的問題,或者你也可以自行定義「max-width」並修改「max-height」