動画全画面表示 : CSS
動画を全画面表示する覚書です。
方法1 基準を動画右下とする例
基準を動画右下にする標準的な例です。
ラッパークラスが必要ありません。
index.html
<html>
<body>
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</body>
</html>
style.css
html, body {
margin: 0;
}
video {
bottom: 0; /* bottomが0のとき上がはみ出すのでスクロールバーが表示されずに済みます。 */
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0; /* rightが０のとき左がはみ出すのでスクロールバーが表示されずに済みます。 */
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
画面縦横比と画像縦横比が異なるときは左、上のどちらかがはみ出します。
ただ上記例ではbottom: 0;を指定するので上へはみ出します。
ブラウザ上へはみ出した部分は表示しないので上部が切り取られることと同じとなります。
またright: 0;を指定するので左へはみ出します。
ブラウザの左側へはみ出した部分は表示されないので左側は切り取られることと同じとなります。
方法2 基準を動画左上とする例
index.html
<html>
<body>
<div class="video-wrapper">
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
style.css
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.video-wrapper {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
video {
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
画面縦横比と画像縦横比が異なるときは右、下どちらかがはみ出します。
親要素へoverflow:hiddenを指定してはみ出した部分を非表示いします。
方法3 基準を動画中央とする例
index.html
<html>
<body>
<div class="video-wrapper">
<video autoplay loop poster="images/example.png">
<source src="example.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
style.css
html, body {
height: 100%;
margin: 0;
width: 100%;
}
.video-wrapper {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
video {
left: 50%;
min-height: 100%;
min-width: 100%;
position: absolute;
transform:translate(-50%, -50%);
top: 50%;
}
min-width: 100%, min-height: 100を指定することで動画は全体を覆います。
中央を基準とするためleft: 50%, top: 50%, transform:translate(-50%, -50%)を指定します。
画面縦横比と画像縦横比が異なるときは縦、横どちらかがはみ出します。
親要素へoverflow:hiddenを指定してはみ出した部分を非表示いします。
コメント
No comments yet.
コメントの投稿
改行と段落タグは自動で挿入されます。
メールアドレスは表示されません。