修正版【お助け下さい…】幅が伸縮したとしても、要素の位置が固定されるようにしたい(ブラウザを可変にしてもデザインが変わらないようにしたい)

前提・実現したいこと

幅が伸縮したとしても、要素の位置が固定されるようにしたい(ブラウザを可変にしてもデザインが変わらないようにしたい)です。

ヘッダー部分です。
テキストは、背景にしている動画を基準に、少し下にはみ出したいです。
ブラウザを可変にしてもデザインが変わらないようにしたいです。
ブレイクポイント：667px(←そもそもこれ必要ないでしょというアドバイスもありましたら下さい。初心者なので分かっていない可能性があります)

要素に色をつけるとすると、下記のような感じです。

試したこと

動画(上の図でいうと赤色)の部分と、
テキストの大きさ(上の図でいうと緑色の部分)
はレスポンシブ対応に出来ましたが、

テキストの位置が、思うように留まってくれず、困っている次第です。

該当のソースコード

html
1 <header>
2        <section class="main-visual">
3            <p>LOGO</p>
4
5            <div class="d-video">
6                <video playsinline autoplay muted loop>
7                <source src="video.mp4" type="video/mp4">
8                </video>
9
10                <div class="content">
11                    <h1>MY<br>  ←※※※緑色の「ここにテキスト」の部分※※※
12                        portfolio</h1>
13                </div>
14            </div>
15        </section>
16    </header>

CSS
1h1 {
2  font-family: "objectivebold_italic";
3  font-size: 14.0625vw;
4  color: #7AD6BB;
5  white-space: nowrap;
6  line-height: 1.3;
7  position: absolute;
8  left: 10%;
9  bottom: 0%;
10}
11
12.d-video {
13  position: relative;
14  height: 795px;
15}
16
17video {
18  width: auto;
19  height: auto;
20  min-width: 100%;
21  background: url("../img/background.jpg") no-repeat;
22  background-size: cover;
23  z-index: -1;
24}
25
26@media (max-width: 667px) {
27  video {
28    width: 100%;
29  }
30}

予想

親要素の高さが正しく指定出来ていない(でもどうしたらいいか分からない)
h1(テキスト)を固定するにbottomを0にしない方がいいのではないか(だとしたら何なのかが分からない)
ブレイクポイントのことばかり考えているがそもそも「ブラウザを可変にしてもデザインが変わらないようにしたい」ならブレイクポイントは必要ないんじゃないか(分からない)

不安点

固定値(px)を使っていいのか？vhでなくていいのか？

が不安です。

根本から大きな見当違いをしているんじゃないか

利用環境

使っているエディタ：VSコード
パソコン：Windows

伝わりますでしょうか…
すごく悩んでいます、どうぞ宜しくお願いします。

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

回答2件

ベストアンサー

やり方は色々あると思いますが、下記のような方法で可能です。
方法1 メディアクエリで分ける

html5
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .videoWrap {
10            width: 320px;
11            height: 200px;
12            position: relative;
13            margin: 0 auto;
14        }
15
16        video {
17            width: 100%;
18            background-size: cover;
19        }
20
21        a {
22            display: block;
23            position: absolute;
24            bottom: -10px;
25            left: -20px;
26            font-size: 20px;
27            padding: 20px;
28            background-color: rgba(36, 36, 36, 0.507);
29            text-decoration: none;
30            color: rgb(230, 230, 230);
31        }
32
33        @media (min-width: 600px) {
34            .videoWrap {
35                width: 640px;
36                height: 400px;
37                position: relative;
38                margin: 0 auto;
39            }
40
41            a {
42                bottom: -20px;
43                left: -40px;
44                font-size: 40px;
45                padding: 40px;
46            }
47
48        }
49    </style>
50</head>
51
52<body>
53    <div class="videoWrap">
54        <video autoplay muted loop>
55            <source src="https://f.easyuploader.app/eu-prd/upload/20200820123159_475a4850713442547259.mp4"
56                type="video/mp4" />
57        </video>
58        <a href="https://pixabay.com/videos/underwater-sea-ocean-water-37712/">フリー&再配布OK！</a>
59    </div>
60</body>
61
62</html>

方法2 画像を使う

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .videoWrap {
10            width: 80vw;
11            max-width: 640px;
12            background-size: contain;
13            margin: 0 auto;
14            position: relative;
15        }
16
17        video {
18            width: 100%;
19        }
20
21        a {
22            display: block;
23            position: absolute;
24            width: 45%;
25            max-width: 288px;
26            height: 25%;
27            background-image: url(https://f.easyuploader.app/eu-prd/upload/20200822160950_5a7a43327a4f45315375.png);
28            background-size: contain;
29            background-repeat: no-repeat;
30            text-decoration: none;
31            color: rgb(230, 230, 230);
32            bottom: -8%;
33            left: -8%;
34        }
35    </style>
36</head>
37
38<body>
39    <div class="videoWrap">
40        <video autoplay muted loop>
41            <source src="https://f.easyuploader.app/eu-prd/upload/20200820123159_475a4850713442547259.mp4"
42                type="video/mp4" />
43        </video>
44        <a href="https://pixabay.com/videos/underwater-sea-ocean-water-37712/"></a>
45    </div>
46</body>
47
48</html>

方法3 Javascriptで制御

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        .videoWrap {
10            width: 80vw;
11            max-width: 640px;
12            background-size: contain;
13            margin: 0 auto;
14            position: relative;
15        }
16
17        video {
18            width: 100%;
19        }
20
21        a {
22            display: block;
23            position: absolute;
24            font-size: 0;
25            line-height: 0;
26            width: 45%;
27            max-width: 288px;
28            height: 25%;
29            background-color: rgba(0, 0, 0, 0.548);
30            text-decoration: none;
31            text-align: center;
32            color: rgb(230, 230, 230);
33            bottom: -8%;
34            left: -8%;
35        }
36    </style>
37</head>
38
39<body>
40    <div class="videoWrap">
41        <video autoplay muted loop>
42            <source src="https://f.easyuploader.app/eu-prd/upload/20200820123159_475a4850713442547259.mp4"
43                type="video/mp4" />
44        </video>
45        <a href="https://pixabay.com/videos/underwater-sea-ocean-water-37712/">フリー&再配布OK！</a>
46    </div>
47    <script>
48
49        window.addEventListener("resize", () => {
50            setTimeout(fontAdjust, 10);
51        });
52
53        window.addEventListener("load", () => {
54            setTimeout(fontAdjust, 50);
55        });
56
57        const fontAdjust = () => {
58            const a = document.getElementsByTagName("a")[0];
59            const aHeight = a.clientHeight;
60            const fontSize = aHeight * 0.33;
61            a.style.fontSize = fontSize + "px";
62            a.style.lineHeight = aHeight + "px";
63        }
64
65
66    </script>
67
68</body>
69
70</html>