youtubeやvimeo等の動画サービスのビデオを
Webページに埋め込む時に気になるのが動画のサイズです。
PCサイズに合わせてしまうとスマホ等のモバイル端末で表示する時には、
枠が飛び出して悲惨な事になることもしばしば。。
そんな動画をWebページに埋め込む時に使いたいサービスが「Embed Responsively」です。
このサービス、動画のURLやサービスのhtmlタグをフォームに入力すると
自動的にレスポンシブに対応するhtmlタグを発行してくれます。
Embed Responsively
対応している動画サービスは主に４つ。
Youtube, Vimeo, Dailymotion, Vineに対応しています。
動画サービス以外にも、Google Mapやインスタグラムにも対応しているようです。
それでは、youtubeの動画を例にして実際に使ってみましょう。
動画のURLを入力して"Embed"ボタンを押すと、動画のサムネイルと共に埋め込みタグが発行されます
Embed Repositoryから発行されたコード
画面サイズの異なるモバイル デバイスでも問題なく表示されていると思います。
Youtubeの動画のリサイズの方法は沢山情報があるのですが、
Embed ResponsivelyはVimeoの動画にも対応しているのがいいですね。
Web上で動画やGoogle mapを埋め込む必要がある時は、一度試してみてはいかがでしょうか。
