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

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

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

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

ちなみにWordPressの場合はYouTubeのURLを直接コピペすれば勝手に動画が埋め込まれる使用にもなっています。ボクはその方法を利用せずに、別ブログでもこの方法を利用しています。

YouTube iframe用CSS

YouTubeの埋め込み

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

ところが、このままだと、左寄せ(ブログの設定による)等されて、YouTubeの埋め込み映像がセンタリングされず綺麗に表示されません。

なのでどうしてもセンタリングをしたい、しかしiframeだと効かない!そんな時に以下のようにします。

DIVでまずは囲む

まずは「<div class=”youtube”>〜</div>」で囲ってあげます。もちろん、このコードじゃ無くて良いのですが、ボクはコレで囲っています。つまり、コードで言うと

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

という具合にYouTubeの「埋め込みコード」で生成されたコードを囲っちゃいます。これで「DIV」要素が効くようになります。

  • 「埋め込みコード」で生成されたコードをさらに別のDIVで囲います
  • 囲うためのコードを単語として登録しておくと何かと便利

CSSはこんな感じ

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

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

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

もしくは、以下のようにやってあげます。

.youtube {
width:100%;
padding-bottom: 30px;
}
.youtube iframe {
max-width:100%;
margin: 10px auto;
display: block;
}

どちらが良いかと言うことは有りませんが、YouTubeを横幅いっぱいにやりたい場合は、二つ目のCSSを当てた方が良いと思います。

  • 肝は「.youtube」と「.youtube iframe」
  • CSSがこれで当てられる

実際にやるとこうなる

div無し、div有りの例

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

YouTubeをブログに埋め込むためのまとめ

  • 「<div class=”youtube”>〜</div>」で埋め込みコードを挟む(youtubeという名前は任意です)
  • 挟むことでYouTubeのiframeにCSSがつかえるようになる
  • 肝は肝は「.youtube」と「.youtube iframe」

YouTubeのばーじょんによって この方法が使えなくなる可能性もなきにしもあらずですが、当分コレでいけると思います。

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

この記事のタグ

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

コメントを残す

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