コンテンツ幅よりも大きな動画で横スクロールバーを出さない方法
この記事は2015年4月9日に書かれたもので、内容が古い可能性がありますのでご注意ください。
仕事でコンテンツ幅よりも大きな動画をキービジュアルとして使用することになったのですが、
横スクロールの処理に手間取ったので備忘録として残します。
前提として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以上となります。
ads