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のように挟めば、レスポンシブ対応となります。簡単ですね。




いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Bloggerのウィジェットやサイドに貼り付けるYoutubeを自動でリサイズ(レスポンシブ対応)させる方法
Bloggerのウィジェットやサイドに貼り付けるYoutubeを自動でリサイズ(レスポンシブ対応)させる方法
Bloggerのウィジェットやサイドに貼り付けるYoutubeを自動でリサイズ(レスポンシブ対応)させる方法を説明いたします。
http://3.bp.blogspot.com/-COCB8WmEdc4/VNyvypfKxlI/AAAAAAAAWyU/lY_A7qWfkR8/s1600/01.png
http://3.bp.blogspot.com/-COCB8WmEdc4/VNyvypfKxlI/AAAAAAAAWyU/lY_A7qWfkR8/s72-c/01.png
ふりむけばコウホウ
http://www.furimuke.com/2015/02/blogger-youtube.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2015/02/blogger-youtube.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy