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

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

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

參考資料

程式碼

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

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

	/* CSS Only */
	.post-body iframe{width:100%!important;}
	@media screen and (max-width:960px){
	.post-body iframe{max-height:90%}}
	@media screen and (max-width:768px){
	.post-body iframe{max-height:75%}}
	@media screen and (max-width:600px){
	.post-body iframe{max-height:60%}}
	@media screen and (max-width:480px){
	.post-body iframe{height:auto!important;max-height:auto!important}}

view raw rwd.css hosted with

by GitHub