おすすめ記事ピックアップ
YoutubeはHTML5だのなんだの言っているのに、Youtube貼り付け用コードは、なんでレスポンスじゃないのか。モバイルで見ると、とにかくはみ出す。Youtubeを自動でリサイズ(レスポンシブ対応)させる方法を検索すると、ざくざく出てきます。いろんなやり方があるのですが、下記を参考にしました。
Bloggerでの使い方を説明します。ウィジェットやサイドにYoutubeの動画を貼り付けたり、ブログ記事内で、ぴったりyoutube動画を表示させたい方は参考ください。HAM MEDIA MEMOさんのブログに感謝!そのままCSSを引用させていただきます。※youtube2→youtubeに変更しています。
でですね。まずこの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の動画を掲載したい所に、貼り付けるだけです。
そうするとレスポンス対応になります。↓
サイドのエリアでも、ウィジェットでも記事内でも、youtubeのコードを上記のdivのように挟めば、レスポンシブ対応となります。簡単ですね。
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&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div>
そうするとレスポンス対応になります。↓
サイドのエリアでも、ウィジェットでも記事内でも、youtubeのコードを上記のdivのように挟めば、レスポンシブ対応となります。簡単ですね。