動画の縦横比を維持しようとすると、動画の範囲外に余白ができてしまう

ウェブサイト制作の練習中の者です。
動画をページに埋め込み、ブラウザ幅を変更しても縦横比を維持するようにしたいです。

縦横比を維持することはできましたが、動画の下に余白ができてしまい、直下に要素を配置することができなくなってしまいました。

HTML
1 <div class="video-wrapper">
2   <span id="video-banner">video</span>
3   <video src="/img/Screen Recording.mov"></video>
4  </div>

SCSS
1body{
2  width:100%;
3  height:100%;
4  overflow-x: hidden;
5  background-color: #f7f7f7;
6}
7
8.video-wrapper{
9  width: 40%;
10  height: auto;
11  padding-top: calc(803 / 1440 *100%);
12  position: relative;
13  
14  &::before{
15    content: "";
16    display: block;
17    height:auto;
18    padding-top: calc(803 / 1440 *100%);
19  }
20    #video-banner{
21      position: absolute;
22      top: 10px;
23      left: 10px;
24      background-color: rgba(0, 0, 0, 0.5);
25      color: white;
26      padding: 5px 20px;
27      border: 1px solid rgba(255, 255, 255, 0.5);
28      border-radius: 30px;
29    }
30  video{
31    position: absolute;
32    top:0;
33    left:0;
34    height: auto;
35    width: 100%;
36    z-index: -100;
37  }
38}
39

###試したこと
・疑似要素beforeを削除
・video-wrapperとvideoに実数 600pxなどを指定するも変化なし

全く検討もつかないため、やや投げやりのような質問になってしまい申し訳ございません。
どなたかご教授いただけますと幸いです。

Lhankor_Mhy

2019/10/07 05:44

.video-wrapper{ padding-top: calc(803 / 1440 *100%); ↑このスタイルの意図を教えていただけますか？（個人的には不要に感じています）

us_k

2019/10/07 13:52 編集

ご返信ありがとうございます。このコードがないと、ブラウザ幅を狭めても動画のサイズが変化しません。 https://minory.org/css-aspect.html こちらのサイトを参考にさせていただきました。動画のサイズが1440×803なので、この計算になりました。

Lhankor_Mhy

2019/10/08 00:35

ご参考にされているサイトのとおりにしている、ということですね？　わかりました。

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

回答1件

ベストアンサー

↓この行を削除してください。

scss
1.video-wrapper{
2  width: 40%;
3  height: auto;
4/*  padding-top: calc(803 / 1440 *100%); ←これを削除 */
5  position: relative;
6
7  &::before{
8    content: "";
9    display: block;
10    height:auto;
11    padding-top: calc(803 / 1440 *100%);  /*  ←ここは必要 */
12  }

　
↓参考にされたサイトのCSSにも書かれていませんので、ご確認ください。

CSS
1.wrapper {
2  position: relative;
3  width: 100%;  /*  padding-top: calc(803 / 1440 *100%); ←ここにはない */
4}
5.wrapper:before {
6  content: "";
7  display: block;
8  padding-top: calc(3 / 4 * 100%);  /*  ←ここにはある */
9}