YouTube・ニコ動・Vine等の埋込み動画がはみ出るときのCSS３種

YouTube や instagram などの投稿をブログに貼り付けたとき、モバイルサイトで はみ出さないようにする対処法です。

CSSの保守性に応じていくつか方法があるのでお好きなコードを使って下さい

外側をラッパーでくるむ

iframe の外側を div 等でくるんでリサイズする方法です。YouTubeだけでなく、TEDなど他の埋め込みコンテンツでもほぼ問題なく指定が効くのでとても便利。

わざわざHTMLを書き足さないといけないので少し面倒なんですが、スマホの縮小表示でも無駄な余白が出ないのでなんとなく綺麗です。

このときの埋め込み領域は、初期設定の width, height が無視されてカラム幅いっぱいの横幅で表示されます。

デモ

HTML

【HTML】
<div class="video-container">
  <iframe src="" width="800" height="450" frameborder="0"></iframe>
</div>


下準備として iframe の外側を div でラッピングし、次のCSSを指定します。

CSS

【CSS】
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  }
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }


最大幅を指定する

次に、画面幅が狭いスマホ表示のときに動画幅を狭くする方法です。

上下を定義してないため、縮小表示させたときに多少余白の感じが変わります。具体的には「上下の帯が太く」なったり「サムネイルのズーム率」が変わります。

多少の違和感を除けば大した実害はありませんし、埋め込みコード自体にも手を加えずに済むので手法としてはとても手軽だと思います。

デモ

デモコードはサンプルコードと一部異なります。

全ての iframe 要素に対して最大幅を規定する

【CSS】
iframe { max-width: 100%; }


これひとつで iframe を使った全ての埋め込みデータをカバー出来ます。ちょう簡単。(´ω｀*)

CSSセレクタでYouTubeなどのサービスごとに条件を絞る

「iframe を十把一絡げにするのは困る」「サービスごとに指定を切り替えたい」という場合は、それぞれに class を付与…するのが一般的ですが、CSSセレクタでサービスごとの指定を切り替える方法もあります。

わざわざ class を書き込む必要がないので、コピペコードにそのまま指示を与えられるのが便利ポイント。

【CSS】
iframe[src^="https://www.youtube.com/"] {
  max-width: 100%;
}


CSS3 対応のモダンブラウザに限りますが、今どき特に不都合はないでしょう。

他のサービスに応用するときは、各埋め込みコードのURLを見て表記を振り替えて下さい。

Embed Responsivelyを使う

あとは Webサービスの Embed Responsively（エンベッドレスポンシブリー） を使う方法です。

埋め込みたい URL を打ち込むと、それぞれの投稿に最適なレスポンシブデザイン対応のCSSを出力してくれます。

インライン CSS なので個別対応になっちゃうんですが、スタイルシートが編集できない環境では相応の使い勝手があるでしょう。

embedresponsively.com

デモ

コードサンプル

https://www.youtube.com/watch?v=Xtb3H94NXfA

例えば、Embed Responsively で YouTube 動画の URL を変換してみます。

「Select a media source below」にて YouTube を選んで Embed を押すと、以下の出力が得られます。（見やすくするため改行してます）

【 HTML/CSS 】
<style>
  .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-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/Xtb3H94NXfA' frameborder='0' allowfullscreen><iframe>
<div>


出力コード自体は、最初の「ラッパーでくるむCSS」と基本的に同じものです。

おまけ：WordPressにYouTube動画を貼る

ちなみにWordPressでYouTube動画を埋め込む場合は標準サポートされてます。リンク形式じゃなくても生URLをコピペすればOK。

https://www.youtube.com/watch?v=Xtb3H94NXfA

YouTubeサポート — WordPress.com

そんなわけで、色々増えてきたSNSなどの埋め込みコンテンツをモバイルサイトで綺麗に表示する方法でした。(・∀・)