Bloggerのウィジェットやサイドに貼り付けるYoutubeを自動でリサイズ（レスポンシブ対応）させる方法

おすすめ記事ピックアップ

YoutubeはHTML5だのなんだの言っているのに、Youtube貼り付け用コードは、なんでレスポンスじゃないのか。モバイルで見ると、とにかくはみ出す。Youtubeを自動でリサイズ（レスポンシブ対応）させる方法を検索すると、ざくざく出てきます。いろんなやり方があるのですが、下記を参考にしました。

HAM MEDIA MEMO Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法
http://h2ham.net/youtube-responsive

Bloggerでの使い方を説明します。ウィジェットやサイドにYoutubeの動画を貼り付けたり、ブログ記事内で、ぴったりyoutube動画を表示させたい方は参考ください。HAM MEDIA MEMOさんのブログに感謝！そのままCSSを引用させていただきます。※youtube2→youtubeに変更しています。

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

でですね。まずこのCSSコードをBloggerのHTMLの編集から、CSSのコード類が貼り付けてあるエリアに貼り付けましょう。

HTMLの編集やCSSがわからない人は、こちらを参考にどうぞ。
http://www.furimuke.com/2013/12/Blogger-HTML.html

だいたいb:skin CDATAの下がCSSが書かれているエリアになっています。その下に書けばOKです。

こんな感じにCSSを追記します。

Youtubeの動画を貼り付ける時、この埋め込みコードをコピーしますよね。

そのコードを先ほどのCSSを反映させたDIVで挟んで、youtubeの動画を掲載したい所に、貼り付けるだけです。

<div class="youtube">

<iframe width="560" height="315" src="https://www.youtube.com/embed/U9nmGLZUGR4?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

</div>

そうするとレスポンス対応になります。↓

サイドのエリアでも、ウィジェットでも記事内でも、youtubeのコードを上記のdivのように挟めば、レスポンシブ対応となります。簡単ですね。