[CSS] 動画の貼り付けコードをレスポンシブに最適化させる

Embedvideo responsive

YouTubeをはじめ様々な動画サイトの貼り付けコードは、そのまま貼り付けるとサイズ調整されずに、レスポンシブレイアウトが壊れてしまう場合があります。レスポンシブサイトに最適化させるには、cssでコンテナを作りwidthをピクセル指定からパーセント指定にしてやります。

以前紹介したFitVids.JSを使う方法(とコンテナを使う方法)では、実質、YouTubeの貼り付けコードのみに対応していましたが、iframe以外にobjectembedにも対応させることで、幅広い貼り付けコードをレスポンシブサイトの表示を崩さずに貼り付けることができます。

続きを読む →

[SEO] Google検索でスマホ対応ページの優遇、4/21より

4/21より、Google検索でスマホ対応ページを優先的に上位に表示させる方針が、いよいよスタートします。

順位が下がると厄介なので、スタートするまでに古いサイトやブログ、Tumblrなども、できるだけデザインテンプレートをレスポンシブデザインのものに変更しておきたいところですね。

Source: Inside AdSense

[JS] 貼り付けたYouTube動画をレスポンシブにするjQuery「FitVids.JS」

FitVids.js」は、YouTubeやVimeoなどの動画サイトから貼り付けコードで貼り付けた動画を、レスポンシブに対応させるjQueryプラグイン。

YouTubeなどの貼り付けコードはmax-widthを100%にしても横長になってしまうため、完全にレスポンシブとは言えず、ちゃんと表示させるにはこのjQueryライブラリを使用する。

続きを読む →