hifi-dev

コンテンツ幅よりも大きな動画で横スクロールバーを出さない方法

2015年4月9日 css , html

仕事でコンテンツ幅よりも大きな動画をキービジュアルとして使用することになったのですが、
横スクロールの処理に手間取ったので備忘録として残します。

前提としてbodyにoverflow-x: hidden;等は使用しないこととします。
横スクロールがなくなってしまいますので。。

まずはhtmlから。
videoタグについては横スクロール処理とは関係ありません。
またサンプルは動画にしていますが、画像でも対応可能です。
まぁ画像の場合は背景にしてしまえばいいのですが、、

<div class="kvArea">
<div class="inner">
<video src="movie/movie_dot_01.mp4" preload="none" poster="movie/img-kv-poster-01.png" autobuffer autoplay loop onclick="this.play();">
<source src="movie/movie_dot_01.mp4">
<source src="movie/movie_dot_01.ogg">
<source src="movie/movie_dot_01.webm">
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>
<!-- /.inner --></div>
<!-- /.kvArea --></div>

続いてcss。

.kvArea {
	overflow: hidden;
	position: relative;
	height: 720px;
}
.kvArea .inner {
	position: absolute;
	left: 50%;
	margin-left: -640px;
}

親要素のkvAreaにoverflow: hidden;で非表示にし内容物の高さ分（サンプルの場合720px）だけ確保します。
子要素のinnerに絶対配置をして中央に寄せれば完成です。
手間取ったわりには結果とてもシンプルなソース。。

以下にサンプルを用意しました。videoタグを使用しているので、対応ブラウザで確認下さい。
IEは9以上となります。

サンプル

css , html kenboh

ads