2014/05/27TweetレスポンシブWebで作られたサイトでは自分で作成した画像などはCSSで対応させますが、Youtubeやvimeoなどの外部サービスを埋め込む際にレスポンシブ対応させる簡単な方法をまとめます。Wordpressの投稿などでも簡単に設定できるのでとても便利です。Youtubeの埋め込みサンプルVimeoの埋め込みサンプルPCではブラウザウィンドウを小さくしたりすると自動的に動画サイズもコンテンツエリア内で縮小されていくと思います。タブレットPCやiPhoneなどのスマートフォンでも画面内に収まっています。難しそうな外部サイトのレスポンシブ対応ですが、CSSのみで簡単に行うことができるので設定方法を見ていきます。HTML側では投稿時にclassを追加YoutubeやVimeoから取得したコードを記述した部分をdiv="move"で囲みます。allowfullscreen></iframe></div>動画埋め込み時のサイズは?Youtubeやvimeoでは埋め込み時に埋め込みサイズを決める形になりますが、これは自分のサイト内で表示したいサイズをpxで指定してしまって大丈夫です。PC上での見た目を指定して、その後CSSでレスポンシブ対応するという形になります。WordPressではプラグイン「AddQuicktag」に登録すると便利WordPressで毎回記述するのは面倒な場合は、タグを登録してボタンで呼び出せる「AddQuicktag」などを使用すると便利でしょう。「AddQuicktag」については以前のWordPressの連載時にまとめていますのでこちらもご覧ください。記事の投稿作業をしやすくする投稿画面のカスタマイズ方法いろいろ|WordPressでビジネスサイトをつくろう【第16回】CSSで行う設定Youtubeやvimeoでは動画の読み込みにiframe要素を使用する形になります。そこでCSSでiframe要素の幅と高さを100%にして、位置をposition:absoluteにしている形になります。iframe{position:absolute;top:0;right:0;width:100%;height:100%;}これだけで読み込み時にサイズ指定した動画をレスポンシブ対応にすることができます。※余白などが必要な場合は任意で追加してください。CSSだけで簡単に動画の埋め込みをレスポンシブ対応できるのでオススメです。今回の動画の埋め込みは2つのブログ(HTML5でサイトをつくろう、WEBデザインクリップ)のリニューアル時に参考にした書籍に載っていたサンプルを使用しました。現場でかならず使われているWordPressデザインのメソッド自分もWordPressの書籍を書かせて頂いていますが、時間が立っているので最近はどんな記述があるかなと今回のブログリニューアルでは複数の書籍を参考にさせていただきました。jQueryデザインのメソッド」と同じシリーズの本です。このシリーズはTIP集的になっていて実装したい内容がまとまっているので、目次を見ていたら「レスポンシブ対応した動画の埋め込み」とまさにドンピシャでそのまま使わせていただきました。ネットでも探せばありますが、書籍としてまとまっている方が自分が探しやすくて定期的に本で勉強しています。現場でかならず使われているWordPressデザインのメソッドブログリニューアル時に使用したWordPress関連の書籍などについては今度まとめたいとおもいます。JAPANというサイトを作りました。このプロジェクトでは、日本各地の素晴らしい風景やイベントを動画で伝えていきたいと思ってます。トレーラーとして京都でのムービーをアップしましたのでよかったら見てください。※PCでご覧の方は是非4Kのフルスクリーンで見てください。ハヤシユタカ2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。詳しいプロフィールはこちら最近書いた記事2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。jQueryデザインのメソッド』発売いたしました。Photoshopで画像の切り抜き、範囲範囲を作成する方法いろいろと参考になる動画まとめました。Facebookページで2つのブログの更新情報をチェック「HTML5でサイトをつくろう」と「WEBデザインクリップ」の更新情報やWEB制作に役立つ情報を更新しています。System」の使い方をまとめました。日本を旅したくなる!一眼カメラで撮られたムービーいろいろ最新のエントリー2016/10/23まずはここから始めよう!作業効率を早めるPhotoshopとIllustratorのショートカットまとめ(ファイル操作・コピペ・ズーム関連)2016/07/19Instagram(インスタグラム)の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。勉強しながら調べたサイト情報やサンプルの作成。そのほかweb制作に役立つ情報を共有し、情報交換できるサイトになればうれしいです。