スポンサードリンク

CSSを設定してYouTubeの動画をレスポンシブに埋め込もう!

YouTubeの動画をレスポンシブにWebサイトに埋め込むための覚え書きです。

まずは動画のページの[共有]から[埋め込みコード]をクリックして表示させ、コピーします。

このコピーしたコードをWebサイトに埋め込むわけですが、このままではレスポンシブにはなっていません(コードのURLはダミーです)。

ですので、まずはレスポンシブにするためのCSSの設定をしておきます。

と言っても、下記のCSSをWebサイトのCSSに追加するだけですけど(^_^;)。

そしてページヘの埋め込みは、先の iframe を divタグで囲って、追加したCSSの youtube-containerクラスを付加してやります。

これでOK!

ただし、動画の前にタイトルとか説明文を入れたい場合には、そのまま上の divタグの中に書いてしまうと潰れてしまうので、もう一重に divタグで囲う必要があります。

うん、これでバッチリ!

参照リンク
 ・Youtubeの埋め込み動画をレスポンシブに対応させる方法 | WebClips_Design
 ・YouTube動画の埋め込みサイズをレスポンシブ対応にする方法 | アンドロイドマニア.com
 ・youtubeの動画やGoogle マップをレスポンシブに埋め込む方法|kohnohidehiro.com

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク