Youtube【Snow Monkey】埋め込み動画の縦横比率を保つCSSコード

WordPressテーマのSnow Monkeyには、YoutubeのURLを貼り付けるだけで、Youtube動画を埋め込みできる素敵機能がある。

レスポンシブで画面の比率が変化すると、埋め込みしたYoutube動画のサムネイル表示の比率が変わってしまい、サムネイル中央だけが表示されるケースもある。

その場合、下のCSSコードを使うことで、Youtube埋め込みの縦横比率を保つことができる。

なお、注意点としては、Youtubeからiframeの埋め込みコードを取得してHTMLで埋め込みしている場合は、上のCSSコードは役立たない。

理由は、URLを貼り付けた埋め込みの時に、下のspanタグが挿入されるのを利用しているから。

<span class="embed-youtube" style="text-align:center; display: block;">

iframeを使ってHTMLで埋め込みしている場合は、URLの貼り付けの埋め込みに変更するか、こちらのページで紹介されているHTMLとCSSを追加して対応する流れになる。