YouTubeの埋め込み(iframe)ようのCSSはこれを使っています

YouTubeの埋め込み(iframe)ようのCSSはこれを使っています

YouTubeをブログに埋め込むときに、YouTube専用の埋め込みコード(iFrame)を利用しています。そこで、センタリングでよく使う「margin : 0 auto;」を使おうとしたところちゃんとセンタリグされない。実は、iframe自体がそういう風にできてなかったのです。

なので、今回CSSを利用して「margin : 0 auto;」を効くように埋め込んだ方法をご紹介します。

iframe用CSS

YouTubeの埋め込み

 

YouTubeの埋め込みコードとは、YouTube動画の下部にある「共有」>「埋め込みコード」から表示されるiframeのコードです。このコードを貼り付ければ動画をブログなどで紹介できるわけです。

ところが、このままだと、左寄せ(ブログの設定による)等されて、綺麗に表示されません。なのでセンタリングをしたい、しかしiframeだと効かない!そんな時に以下のようにします。

DIVでまずは囲む

まずは「<div class=”youtube”>〜</div>」で囲ってあげます。つまり、コードで言うと

<div class=”youtube”><iframe 〜〜></iframe></div>

という具合に囲っちゃいます。これで「DIV」要素が効くようになります。

CSSはこんな感じ

先ほどの「youtube」DIV要素の以下のCSSを当てます。

.youtube { margin:10px 0; }
.youtube iframe { margin: 0 auto; display: block; }

このように「youtube」と「youtube iframe」を用意します。ここでポイントなのが、「youtube iframe」に「display:block」を当てることで「margin:0 auto;」を利用できちゃいます。

実際にやるとこうなる

div無し、div有りの例

このように「div有り」「div無し」で表示のされ方が変わります。これでYouTubeの埋め込み方法がわかったと思います。お疲れ様でした。

まとめ

  • 「<div class=”youtube”>〜</div>」で埋め込みコードを挟む
  • CSSには以下を書き込む

.youtube { margin:10px 0; }
.youtube iframe { margin: 0 auto; display: block; }

この記事に関連する記事一覧

この記事のタグ

キセノンテンターの最新情報をゲット

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です