前提・実現したいこと

動画を再生できるWebサイトを作成しています。
動画を中央に表示したく、親要素にdisplay:flexを指定し
縦幅が100％の際には左右に余白　/　横幅が100％の際には上下に余白を表示するよう実装しました。
ただ、画面の大きさが動画の大きさを超えた際に謎の余白ができます。
（動画サイズ1280*720で固定され、それ以降は余白ができる）
余白を削除する方法ありますでしょうか？

display:flexを削除すると正常に100％で表示されましたが、動画を中央にしたいため記載しています。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4<title>HTML, CSS and JavaScript demo</title>
5</head>
6<body>
7<!-- Start your code here -->
8
9  <header></header>
10  <div class="content">
11    <div class="videoPlayer">
12      <div class="videoContents">
13        <div class="videoWrap">
14          <video>
15            <source src="https://www9.nhk.or.jp/das/movie/D0002190/D0002190002_00000_V_000.mp4" />
16          </video>
17        </div>
18      </div>
19      <div class="controller">
20        
21      </div>
22    </div>
23    <div class="sideMenu"></div>
24  </div>
25  <footer></footer>
26
27<!-- End your code here -->
28</body>
29</html>

CSS
1//--- 追記 ---
2html {
3    height: 100%;
4}
5
6body {
7    height: 100%;
8    margin: 0;
9}
10//---/追記/---
11
12header {
13    background-color: #A9D8FF;
14    height: 6vh;
15    color: black;
16    position: relative;
17}
18
19footer {
20    height: 6vh;
21    width: 100%;
22    color: black;
23    background-color: #F00;
24    position: absolute;
25    bottom: 0;
26}
27
28.content {
29    width: 100%;
30    height: calc(100% - 12vh);
31    position: relative;
32}
33
34.videoPlayer {
35    width: calc(100% - 350px);
36    height: 100%;
37    position: relative;
38}
39
40.videoContents {
41    position: relative;
42    overflow: hidden;
43    height: calc(100% - 80px);
44    margin: auto 0;
45    display: flex;
46    justify-content: center;
47    align-items: center;
48    background-color: #0F0;
49}
50
51.videoWrap{
52    max-width: 100%;
53    max-height: 100%;
54    position: relative;
55}
56
57video {
58  width: 100%;
59  max-width: 100%;
60  max-height: 100%;
61}
62
63.controller {
64  height: 80px;
65  width: 100%;
66  background: #C00;
67}
68
69.sideMenu {
70    width: 350px;
71    overflow-y: scroll;
72    position: absolute;
73    right: 0;
74    top: 0;
75    bottom: 0;
76    background-color: #00F;
77    color: white;
78}

試したこと

video要素にdisplay:blockを指定しましたが変わりませんでした

###追記
横幅を大きくした際に下記画像のように謎の空白ができます。
widthまたはheightを100％にし、中央に動画を持ってきたいです

meg_

2021/04/23 10:51

> 余白を削除する方法ありますでしょうか？欲しい結果が分かりません。図等で提示できませんか？

te_ff

2021/04/26 07:17

追記いたしました。

meg_

2021/04/26 07:37

ブラウザの規定の設定が影響している可能性はありませんか？リセットcssを使用してみてはどうでしょうか？

te_ff

2021/04/26 07:56

destyle.cssを落としてきて利用しています。開発者ツールを開き、videoContents、videoWrap、videoのdisplay:flex以外を無効化しても変わりませんでした。。。

meg_

2021/04/26 08:08

> destyle.cssを落としてきて利用しています環境を全て教えていだだけないとこちらで再現できません。｢謎の空白｣を確認されたブラウザは何でしょうか？

meg_

2021/04/26 08:12

現象としては、videoWrap と Video の間にパディングがあるような感じですか？

te_ff

2021/04/26 08:30

ブラウザはChromeで開発しておりますが、試しにFireFoxでも開いてみましたが同じ現象が起きていました。現象としてはvideoContentsとvideoWrapの間に謎の余白がある状態です。開発者ツールでVideo,VideoWrapの要素確認してみたのですがどちらにもmarginやpaddingはありませんでした。

meg_

2021/04/26 10:50

destyle.cssも適用しましたが、現象が再現しませんでした@Chrome。（余白は出現しませんでした）

te_ff

2021/04/27 01:35

HTMLやbody要素のCSSに不備があったようで申し訳ありません。追記いたしました。

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

以下を追加してみてはいかがでしょうか。

css
1.videoWrap {
2	max-width: 100%;
3	max-height: 100%;
4	position: relative;
5	width: 100%; /* 追加 */
6}

質問の追記に合わせて追記

以下はどうですか？

css
1video,
2.videoWrap {
3    width: 100%;
4    height: 100%;
5}

コメントを受けて追記

以下はどうですか？

css
1video,
2.videoWrap {
3    width: min(calc(100vw - 350px), calc((100vh - 80px) * 1280 / 720));
4    height: min(calc((100vw - 350px) / 1280 * 720), calc(100vh - 80px));
5}

投稿2021/04/24 05:56

編集2021/04/28 04:29

Lhankor_Mhy

総合スコア36134

te_ff

2021/04/26 07:19

width: 100%;を指定してみたのですが、横幅を大きくしすぎた際にheightが画面をはみ出してしまいました。 videoWrapのheightは動画サイズに合わせたいのですが、何かほかにやり方ありますでしょうか？

Lhankor_Mhy

2021/04/26 09:27

謎の空白というのは、動画の横のものかと思っていたのですが、違うのですね。問題が再現しませんでした。当方の環境では、ご提示のコードに加え、「video要素にdisplay:blockを指定」することによって、widthまたはheightのどちらかが親要素いっぱいに広がっています。問題が再現するコードをご提示ください。

te_ff

2021/04/27 01:35

HTMLやbody要素のCSSに不備があったようで申し訳ありません。追記いたしました。

Lhankor_Mhy

2021/04/27 06:55

追記されたコードを試してみましたが、問題が再現しませんでした。

Lhankor_Mhy

2021/04/27 07:11

すみません、スクリーンサイズが小さかったようです。問題を把握しました。

Lhankor_Mhy

2021/04/27 07:27

追記しました。

te_ff

2021/04/28 03:06 編集

ありがとうございます！こちらで対応できたのですが、VideoWrapの範囲はVideoに合わせ、Video要素の範囲のみに要素の高さ、幅を指定したいと思っております。 JSで制御するしかなさそうですかね…

Lhankor_Mhy

2021/04/28 04:29

追記しました。

te_ff

2021/04/28 08:05

cssでjs的な書き方ができるんですね！ありがとうございます！解答のcssでHeader,Footerの分12vhをマイナスしてあげると想定していた動きになりました！ video, .videoWrap { width: min(calc(100vw - 350px), calc((100vh - 80px - 12vh) * 1280 / 720)); height: min(calc((100vw - 350px) / 1280 * 720), calc(100vh - 80px - 12vh)); }

Lhankor_Mhy

2021/04/28 08:52

失礼しました。そちらの部分を見落としていました。お役に立てたようで何よりです。

行動規範の内容に同意します