何でもありのカオスなブログ

超簡単!スマホで見た時にYoutubeをはみ出さないようにする方法!

      2014/05/08

youtube
photo by Graham Smith

ひと手間加えてもっと楽に!

ども、ひろ@tekito-daro)です。

YoutubeをCSSでスマホ対応って記事をみましてね?

埋め込んだYouTube動画をスマホ用にCSSで最適化する方法

自分もたまに埋め込んでるけど、そんなめんどくさいことしなくてもはみ出ないよ?

ってことで、Youtubeを記事に埋め込んだはいいけど、スマホでみると画面からはみ出る!!
ってのを超簡単にはみ出ないようにしちゃう方法を書いていきます(・∀・)

SPONSORED LINK

はみ出る→はみ出ないにする!

どうでしょうか!はみ出てないですよね?
よかったらスマホとPC両方で見比べてみてください。

で、これをスマホ対応するためにdivで囲ってCSSで弄ってもいいんですけど、もーーーっと簡単な方法があります!!

CSSにこれだけ書いておけばOK!

参考:max-widthでYouTubeをはみ出さないようにする方法とかどうでも良くて、おむつのスケボー少年の乗りこなしが凄過ぎた話(笑) | room9(ルームナイン)

iframe {
  max-width: 100%;
}

たったこれだけ!
これを書いておけば、PCだろうとスマホだろうとタブレットだろうと問題なし!

PCとスマホ用、両方のCSSを変更するのを忘れないように!

WordPressなら埋め込みタグより、共有(シェア)のURLを使うともっと楽!

これは別にはみ出さないようにするのと関係ないですけどねw

WordPressを使ってる人なら、埋め込みタグだとビジュアル→テキストに切り替える必要があるんですが、
シェアのところに表示されるURLを使えばビジュアルエディタでもそのまま貼り付けることができちゃいます!

Youtube 共有URL

これを使えばOK!
ちなみにテキストエディタでも普通に使えるので結構オススメ。

ちなみに上の方に張ってある動画は共有のURLを使ってます。
URLを使っても、CSSの設定はしっかり反映されるので問題ありません(・∀・)b

ひとこと

実は最初、max-widthがテーマで設定されてるの知らなくてすごいバカ丸出しの記事を書いてしまいましたw

けど、そのおかげでしっかり覚えれたのでよしとします!

そんじゃまた(・∀・)ノシ

 - WordPress