CSS: 埋め込み動画をページ幅に収める

先日 YouTube の動画を当サイトで埋め込んだが、あとでスマートフォンで念のため表示チェックしてみたら見事にあふれていた。どうやら固定幅の iframe は適宜調整してくれないらしい。

私は自分の動画共有には Vimeo を利用している。それで過去の Vimeo 動画の埋め込みページもチェックしたら同様にページ幅を無視していた。

幅だけを max-width で収めるやり方だと、動画の縦が言うことをきかない。auto でなんとかなるだろうと思うところだが、やってみると分かるのだがものすごく小さい表示になってしまう。幅 100% に合わせた縦サイズになってくれないのである。

そのあたりの問題をクリアした CSS 指定が以下。

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

cf. http://scope.minibird.jp/niji-life/archives/482

padding-bottom:56.25%; というのが YouTube や Vimeo の動画の縦横比を維持するポイント。
また Vimeo では動画を埋め込むと、動画の概要コメントもついてくる。これを体裁良くするための CSS も用意した。

div.video-container-vimeo {
	background:#f0f0f0;
	margin-bottom:2em;
	margin-top:-0.5em;
	border-radius:0 0 8px 8px / 0 0 8px 8px;
}
div.video-container-vimeo p {
	padding:1em;
	text-indent:0;
}

margin-top:-0.5em; で上に引っ張り上げているのは、動画の下部に微妙な隙間ができるから。背景色やボーダーを設定しないのであれば気にならないと思うのでいらないかもしれない。

まとめると、YouTube の動画を埋め込む場合は div.video-container で囲む。
Vimeo の動画を埋め込む場合は動画部を div.video-container で囲み、コメント部を div.video-container-vimeo で囲む。

これで低解像度向け表示時でも縦横比を維持したままページ幅に合わせた表示をしてくれる。

  • 20170518224832