YouTubeのiframe動画共有タグをWordPressに設置する（レスポンシブ対応）

先日

低価格な可変式NDフィルターNew-View Pro Fader NDのレビュー評価

の記事内で、撮影した動画をYouTubeにアップロード、その動画をYouTubeの共有タグを利用して

記事内に設置したところ、当然デフォルトでは、レスポンシブWEBデザインに対応していないので

スマートフォンやタブレット端末で記事を見ると、動画が画面からはみ出して表示されてしまいます。


画面サイズを横320程度に抑える形でカスタムタグを作成すれば

簡単に解決しますが（小さい画面の場合）、今度はパソコンなどの高解像度で記事を表示した際

何とも言えない不格好なYouTube動画を表示してしまいます。


折角、サイト全体がレスポンシブWEBデザインに対応しているのだから

YouTube動画もレスポンシブに対応させたいところです。


YouTube上から共有タグを取得する際に、それらしきオプションが無いのか？

確認してもやっぱりありませんね。


自分でCSSやタグを作成しないといけないのかな～っと

思いつつもインターネット（Google）を検索すると

たくさんの情報がヒットしました。（みんな考える事がいっしょなんですね）


■参考にしたページ（そのままコピペですが・・・）
webdesignerwall.com/tutorials/css-elastic-videos


YouTube動画をレスポンシブに対応させるコード自体は少ないので

そのままコピペでCSSや、共有タグの上にdivコンテナを追加するだけです。


▼CSS（スタイルシート）

wordpressのデフォルトcss（style.css）の適当な位置に下記のコードを追加

.video-container {

  position: relative;

  padding-bottom: 56.25%;

  padding-top: 30px;

  height: 0;

  overflow: hidden;

}



.video-container iframe,  

.video-container object,  

.video-container embed {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

<div class="video-container">

  <iframe width="560" height="315" src="" frameborder="0" allowfullscreen></iframe>

</div>