cssで親要素のcontainerの高さと、小要素であるvideoタグの高さを合わせたいけれど、6pxの差が縮まらない。

下記のコードでcontainerのheightにvideoタグのheightをあわせたいのですが、どうしても6pxだけcontainerが大きくなってしまいます。

試した方法は下記です。

styleに
object-fit:cover,fill
の適用。

その他displayやpositionもいじってみたのですが1日潰れてしまいました。
marginやpaddingも調べてみたのですが、Chromeのデベロッパーツール上ではどちらも0でした。

どなたかご存知であれば教えていただければ嬉しいです。
下記コードになります。
スタイルシートはありません。

html
1<!doctype html>
2<html>
3
4<head>
5</head>
6<body>
7	<div class="container"><video style="width:100%; height:100%;"></video></div>
8</body>
9
10</html>

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

回答1件

ベストアンサー

サイズの%指定は親要素にサイズ指定がある場合にのみ有効なようです。
この場合は親要素の div タグにサイズ指定がないため、 video タグの高さは auto になってしまっています。

参考：height | MDN

親要素の div タグの高さを明示的に指定するなどの対策が必要かと存じます。

以下追記---
video タグの width 指定、 height 指定では相対値は不可 となっているようです。
一応動作しているようですが……。
参考：<video>: 動画埋め込み要素 | MDN

投稿2018/12/19 10:22

編集2018/12/20 15:26

R.Mizukami

総合スコア1086

geek_y_tom

2018/12/20 02:14

回答いただきありがとうございます。指摘頂いた通り親要素にサイズを指定したら、親要素とvideoで高さが揃いました。ありがとうございます。ちなみにですが、このときの親要素で指定するheightを, ①ウィンドウサイズに応じてレスポンシブに変化する親要素のwidth（width:100vwで指定） ②小要素で①のwidthを規準にしてwidthを設定 ③②のwidthを規準に縦横比を固定しながら変動する小要素videoのheight に指定したいと思ったとき、jsを駆使して都度書き換えるしかなさそうでしょうか????？それともなにか親要素のstyle heightに特定の値を入れればいいでしょうか？ご回答頂いたようにheightに100px等を入れてしまうと、videoの縦横比が崩れてしまいます。度々申し訳ございません???? ``` <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1" charset="UTF-8"> </head> <body> <div class="container"style="width:100vw;height:ここにどの値を入れたら良いか;"> <video class="container__video"style="width:100%;"> </video> </div> </body> </html> ```

R.Mizukami

2018/12/20 15:22

横は画面いっぱい、縦は縦横比を維持して横幅から決定、ということですよね。質問に追記いただくと回答に含めやすいのですが、とりあえずこちらに。以下サイトのようにpadding を比率で設定する小技があります。 https://www.outlier.com/blog/responsive-video-size-css 16:9のアスペクト比なら、以下のように padding-bottom : 9/16 = 56.25% となる感じです。 .container{ position: relative; padding-bottom: 56.25%; height: 0; width: 100vw; } .container>video{ position: absolute; width: 100%; height:100%; }

geek_y_tom

2018/12/25 03:00

ご回答いただきありがとうございます（泣）こういう方法もあるのですね、参考にしてみます！ありがとうございます！

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