videoをレスポンシブ対応させた際のコードを理解したい

独学でコーディングを勉強している初心者です。
下記サイトを参考に、MVで動画を導入し、レスポンシブ対応させています。
CSS 動画を画面いっぱいに設置する方法レスポンシブ対応

やりたかったのは、縮小しても画面に対する縦幅の占有率は変えずに、なおかつ常に画面中央に動画中央がくるようにする、というものです。
実際、参考サイトの通りのコードで、それが叶いました。

しかし、肝心のコードの内容が、いまいち理解できません。
どなたか解説してはいただけないでしょうか？

下記にコードと、考えたときに使ったjpgを記載いたします。

HTML
1
2<div class="video_wrap">
3　　<video src="art/sample_movie.mp4" autoplay loop muted>
4    　　<img src="art/sample_movie.jpg" alt="">
5   </video>
6</div>

CSS
1
2.video_wrap {
3    position: relative;
4    overflow: hidden;
5    width: 100%;
6    height: 80vh;
7}
8video {
9    position: absolute;
10    top: 50%;
11    left: 50%;
12    min-width: 100%;
13    min-height: 100%;
14    transform: translate(-50%, -50%);
15}

わからない部分
・なぜvideoでわざわざtopとleftを設定し、transformで位置調整しているのか？
（位置を戻しているだけ？）
・min-widthとmin-heightは、親要素のサイズに合わせるための記述？
・なぜ左端に寄っていた動画が、中央に表示されるようになるのか？

以上です。
すみません、たぶんわかる人から見たら意味のわからない図になっていると思うのですが、教えていただけたら嬉しいです。
よろしくお願い致します。

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

回答1件

ベストアンサー

同じパーセンテージでも translate と top とでは、意味が異なります。

パーセント値の場合は、 transform-box で定義される参照ボックスの幅からの相対値です。

[translate() - CSS: カスケーディングスタイルシート | MDN](https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate(%29)

包含ブロックの高さに対する <percentage> です。

top - CSS: カスケーディングスタイルシート | MDN

そういうわけで、

video の高さが 2000px
.video_wrap の高さが 1000px

であった場合、

translate(-50%) は -1000px
top: 50% は 500px

です。

もうご理解いただけたかと思いますが、子要素の半分だけずらし、親要素の半分だけずらす、ということをしています。
左上に揃っている親子要素で、子要素の半分をずらすと、中心が左上に来ます。
そこから、親要素の半分をずらすと、中心が親要素の中心に来ることになります。

なお、min-widthとmin-heightについては、ご理解の通りです。

蛇足ですが、「top 50% translate "-50%"」でググると、この回答より全然わかりやすい解説がたくさん見つかると思います。
ググり力を鍛えましょう。

投稿2021/03/26 03:28

Lhankor_Mhy

総合スコア36941

works_noname

2021/03/26 08:11

お返事ありがとうございます。ご指摘の文章（top 50% translate "-50%"）で検索し、図解などを参照してようやく理解できました。 top50%は親要素に対しての割合で、translate50%は適用した要素そのものに対しての割合なのですね。あともうひとつ、それでもなぜ画面中央に動画中央がくるのかわからなかったのですが、video_wrapとvideoが常に同じ大きさと勘違いしていたことが原因でした（添付した図の2つ目の時点で、既にvideo_wrapの大きさを間違えていたのでわからなかった）。 video_wrapはあくまで画面に対しての数値で、videoサイズはSPになっても変わらないですよね。その勘違いがなくなって、全てがすっきり理解できました。今後はもっと、各プロパティの意味など基本的なことをしっかり把握して、ググり力を鍛えて、自己解決できるように頑張ります。ありがとうございました。

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