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

カテゴリー:WordPress    |    タグ:

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

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

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

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

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

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

これだけですw

参照サイト


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

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

ADVERTISEMENT

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

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

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

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

Twitter

関連記事

shortcode-i

簡単にショートコードが使えるようになるプラグイン「Shortcodes Ultimate」

すごく簡単にショートコードが使えるようになるプラグイン「Shortcodes Ultimate」を導

記事を読む

wordpress_stickers_everywhere

WordPress3.7がリリースされたので変更点の確認と気をつけるべき点をメモ

自分のプライベートブログなので、いつもは何となく変更点をさっくり見てさっさとアップデートしているので

記事を読む

wordpress_stickers_everywhere

【WordPress】とっても簡単に目次を入れてくれるプラグイン「Table of Contents Plus」

このブログでも使用しているこのプラグイン。いろいろなところでお目にかかることがあり、面白そうだなと思

記事を読む

jQuery

記事内の外部リンクを別窓で開き、画像などをつけて(CSS装飾して)わかりやすくする【jQuery】

外部リンク(他のサイト)は別窓(新しいタブで表示)。そして、外部リンクですよ!というのをアイコンをつ

記事を読む

side-no

Stinger3でスマホ用子テーマを使っている方はここにご注意だ!と思ったところ

最近スマホ用子テーマを作成したのですが、その方のブログを見たときはっ!っとなり、気になったので。

記事を読む

コメントを残す

2件のトラックバック

ADVERTISEMENT
nijisan

Written by niji_sansan

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

  • 2017年6月
    « 12月    
     1234
    567891011
    12131415161718
    19202122232425
    2627282930  
電子書籍ストア BookLive!
PAGE TOP ↑