youtubeやinstagramの埋め込みコードをレスポンシブ化させてくれるwebサービス「embedresponsively.com」

覚えておいて損はないかも。

自分のブログ内で、自分で用意する画像や映像に関してはCSSで割と簡単にレスポンシブ化させることが出来ますが、外部サービスが吐き出す埋め込みコードは知識がなければ、あるいは知識があってもレスポンシブ化させるのが困難なパターンもありますね。

特にinstagramなんかは結構厄介なんですよね。

そこで、

埋め込みコードをレスポンシブ化してくれるwebサービスなんてものがアリます。

実際このブログではyoutubeやvimeoなんかはレスポンシブ化してありますが、この先埋め込みたいwebサービスごとに対応するのは面倒だし、CSSの知識のない方でもコイツを使えば簡単に対応させられるので、便利です。

レスポンシブなブログを組んでいる方でビデオや写真がはみ出しているのを見受けますが、あれはね、ちょっとね。

実際に使ってみます。

この映像のアドレスを変換してみます。

<style>.embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; width: 100% } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/3fH5TyWwF7I' frameborder='0' allowfullscreen></iframe></div>

こういうコードが吐出されました。

なるほど、埋め込むメディアに併せてCSSを書いてくれるようです。

おそらくスマホで見ても、漏れることはないでしょう。

では、instagramではどうでしょうか。

instagramが埋め込み用に吐き出すコードは以下です。

<iframe src="//instagram.com/p/bC61zaQzNL/embed/" width="612" height="710" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

こちらもレスポンシブ化させると

<style>.embed-container {position: relative; padding-bottom: 120%; padding-top: 30px; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='//instagram.com/p/bC61zaQzNL/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

こういうCSS付きのコードを書いてくれます。

どうでしょうか？スマホで閲覧した時、漏れてますでしょうか？

どうやらこのブログでは事前に自分で書いたコードをバッティングしてyoutubeだと上手く動かないですね。

まとめるね！

ある程度CSSの知識がアレば、画像やビデオのレスポンシブ化は難しくありません。

WordPressで記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技*prasm_

じっさい上の記事はウェブサービスが書いてくれるCSSに近いことをテーマの大本のCSSに施す作業です。

とはいえ、CSSを扱えなくても埋め込みを簡単にレスポンシブ化してくれるのは、知識がなくとも手軽に出来て、知っておいて損はないですね。

いちいちウェブサービスにかけるのが面倒な方はCSSを少し勉強してもいいかもしれません。

なかなか気が利くウェブサービスなので、同様なものがたくさん出てくてくれるといいなぁ。

文：シンタロヲフレッシュ

はてブ

pocket

twitter