JintanNote（じんたんノート）

結構簡単。CSSを使って、スマホでも埋め込み動画をはみ出すことなく綺麗に表示させる方法。

2014/06/02By JindaShoya in 技術系のこと

埋め込み動画をレスポンシブ対応させようって話です。埋め込み動画を編集中もしくは閲覧している際に

pcでの表示は問題ないのにスマホだと右にはみ出てるし、画面をスクロールする度に左右に動いたりしてウザい
もしくは左右には動かないけど再生ボタンが画面の右端で切れていて再生できなくてウザい

こんな経験あると思います。せっかく見ようと思ったのに表示が崩れていると見る気失せちゃいますし、ただ貼付けるだけでは親切ではないです。CSS数行とちょっとした工夫で解決できますので、ご覧ください！

とは言っても簡単に…

iframe {
	width: 100%;
}

で解決なのでは。って記事もいくつか見かけましたが、これだと不完全なのでこんな感じで対応しましょう。

html

&lt;div class=&quot;movie&quot;&gt;
  &lt;iframe width=&quot;720&quot; height=&quot;405&quot; src=&quot;//www.youtube.com/embed/ppDibM77B9U&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;/iframe&gt;
&lt;/div&gt;

css

.movie {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}

.movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

こんな感じで表示されます。

See the Pen wsHIb by Shoya Jinda (@sjinda) on CodePen.

ポイントはiframeをdiv class=”movie”で括ることです。movieは例なので任意のclass名で構いません。

対応は画像だけで充分！

という方は

img {
	width: 100%;
}

で解決できます。
こんな感じで表示されます。

See the Pen Ffiaq by Shoya Jinda (@sjinda) on CodePen.

寿司美味そう…美味い寿司食いたい。