どうもshinyaです！
自身のブログなどでYouTubeの動画を埋め込んだ時、
スマホで見たり、2カラムから3カラムに変更した時など
動画が枠よりはみ出したりしますよね。
テンプレートを一新した時などにも知らぬうちに
こういったことが起こると思います。
今回はYouTubeなどの動画を自分のブログに
埋め込む際に一手間加えることによって
超簡単にレスポンシブにする方法をお伝えします。
物凄く簡単なので、今後動画を埋め込む際は
このやり方をぜひ実践してみてください。
埋め込み動画を超簡単にレスポンシブ（横幅自動最適表示）のやり方
埋め込みたい動画の埋め込みコードをコピーして貼り付けます。
すると下記のようになると思うので、
<iframe width=”854” height=”480″ src=”https://www.youtube.com/embed/43XXXXeiTNo” frameborder=”0″ allowfullscreen></iframe>
横幅の数値の箇所（黄色部分）を100%に書き換えます。
| width=”100%“ |
100%
こちらをコピーして”と”の間に貼り付けて見てください。
これだけで終わりです。
これをすることによってどんな状況であっても
横幅MAXの状態で動画を表示してくれるようになります。
縦幅は、一度横幅を100%に設定してみてから
比率を調整してみてください。
動画ではなく画像も自動ではみ出ないように
レスポンシブにしたい場合は下記を参考にして
ください。
画像も物凄く簡単にできます。
スマホ表示とPC表示の画像の大きさを自動で最適表示させる方法
