YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法

エンタメカテゴリーの変更を依頼記事元:

www.msng.info

13users がブックマークコメント

コメント

3

記事へのコメント3件

注目コメント
新着コメント

larker CSSでレスポンシブウェブデザインに対応

YouTube

2014/06/05 リンク

forestk そんな時はこれ使うのオススメ http://embedresponsively.com/

2014/06/03 リンク

emj1025 youtube iframe

css

2014/06/03 リンク

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法

YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法 2014年06月02... YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法 2014年06月02日 15:08HTML / CSS YouTube で取得できる埋め込み用コード、いまは iframe になってますね。こんなぐあい。これをレスポンシブウェブデザインに対応させるにはどうしたらいいか、というお話です。画像とは事情が違う通常、ブラウザの幅にあわせて画像の表示サイズが変わるようにしたければ CSS でこんな感じに書くと思います。 img { width: auto; max-width: 100%; height: auto; } これで、最大幅は親要素の幅と同じ、元の画像がそれ以下のサイズ場合は本来の幅で表示され、高さは縦横比を保ちながら適切なサイズになりますね。ところが iframe の場合は事情が違って、適切なサイズで表示するに

css
YouTube

ブックマークしたユーザー

takumi_fire2016/03/14
h-a-t-e-h-a-t-e-h-a-t-e-n-a2015/02/10
larker2014/06/05
forestk2014/06/03
emj10252014/06/03
ochanoco_naoco2014/06/03
sin_132014/06/03
cockok2014/06/03
bigeast05122014/06/02

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - エンタメ

いま人気の記事 - エンタメをもっと読む

新着記事 - エンタメ

新着記事 - エンタメをもっと読む

いま人気の記事 - 企業メディア

企業メディアをもっと読む

設定を変更しましたx