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

カテゴリー:WordPress    |    タグ:

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

ブログに紹介したい動画を貼り付けて載せる場合には、埋め込みコードを使ってブログにコピペしますよね?

ただ、このコードをそのまま貼り付けるとスマホで見るとはみ出てしまいます。
それは、貼り付けコードの中身を見るとすぐわかるのですが、横と縦の大きさが固定幅で設定されているからです。
これをCSSでスマホ用に最適化する方法。

スマホ用にCSSで最適化する方法

貼り付けたいコードに、div class="video-container"で囲みます。

CSSに以下のように記述します。

これだけですw

参照サイト


埋め込みコードをレスポンシブ用に変換するサービス

実際に試したことはないので、アレですがこういったサービスもあるようです

ADVERTISEMENT

  • Pocket
  • このエントリーをはてなブックマークに追加

published:2014/05/06    Written by:
カテゴリー:WordPress,      タグ:

最後まで読んでくれた方へ。

閲覧頂きありがとうございました!
お気に召しましたら是非RSS登録やフォローをお願いします!

Twitter

関連記事

top_niji

ブログのデザインを変更しました!そのとき考えたこと思ったこと

実は元のデザインを最新のStingerのバージョンに対応しようと思っていたのですが、なんだか新しいの

記事を読む

ELLY95_hanatotegami

ブログの記事下に自分のプロフィールとRSS購読ボタンを設置する

このブログの記事したにある購読スペース(RSS登録とかTwitter、Facebook、Google

記事を読む

memo

【Stinger3カスタマイズ】バージョンアップしたのでこのブログで変更したところを書き留めておく備忘録 #3

つい最近デザインを変更してみたのですが、どうにもノリノリでかけなくなってしまったのでまたデザインを元

記事を読む

カスタマイザー-i

新しくパワーアップされた「STINGER5」のテーマカスタマイザーを使ってみよう!

最近新しくリリースされた「STINGER5」html5でレスポンシブにされており内容も充実して更にパ

記事を読む

Wordpress1

WordPressでカテゴリーごとにデザインを変更する方法【Stingerカスタマイズ】

表題についてお問い合わせを頂きましたので、ブログにてご返答させて頂こうと思います。 今回は、エント

記事を読む

コメントを残す

2件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

生まれ落ちた地は神戸。
鉄成分入ってるものに興味あり!
キイロイトリが好き!
感動すると「ほぅ」と言いますw

  • 2017年5月
    « 12月    
    1234567
    891011121314
    15161718192021
    22232425262728
    293031  
電子書籍ストア BookLive!
PAGE TOP ↑