動画の上の文字が画面の大きさが小さくなっても表示できるようにしたい

動画の上の文字が、スマホサイズぐらいまで小さくすると<h2>しか表示されなくなります。
どの画面の大きさでも文字が表示できるようにしたいです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" type="text/css" href="css/style.css">
6    <title>Document</title>
7</head>
8<body>
9    <article class="story">    
10        <h2 id="story">ストーリー</h2>
11        <p><video autoplay loop muted class="movie"><source src="images/movie.mp4" type="video/mp4"></video></p>
12        <p>趣味の絵と本と想像の中で、自分の世界を生きるジョゼ。<br>
13            幼いころから車椅子の彼女は、ある日、危うく坂道で転げ落ちそうになった
14            ところを、大学生の恒夫に助けられる。<br>
15            
16        海洋生物学を専攻する恒夫は、メキシコにしか生息しない幻の魚の群れを
17            いつかその目で見るという夢を追いかけながら、バイトに明け暮れる勤労学生。<br>
18            
19        そんな恒夫にジョゼとふたりで暮らす祖母・チヅは、あるバイトを持ち掛ける。<br>
20            
21        それはジョゼの注文を聞いて、彼女の相手をすること。<br>
22            しかしひねくれていて口が悪いジョゼは恒夫に辛辣に当たり、
23            恒夫もジョゼに我慢することなく真っすぐにぶつかっていく。<br>
24            そんな中で見え隠れするそれぞれの心の内と、縮まっていくふたりの心の距離。<br>
25            その触れ合いの中で、ジョゼは意を決して夢見ていた外の世界へ
26            恒夫と共に飛び出すことを決めるが……。</p>
27        </article>
28</body>
29</html>

style.css

h2{
  margin: 50px 0px;
}
.story{
  position:relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.story>p:nth-of-type(2){
  position: relative;
}
#story{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center; 
  font-size: 3.4rem;
}
#story:before, #story:after {
  border-top: 1px solid;
  content: "";
  width: 10.0em; 
}
#story:before {
  margin-right: 1em; 
}
#story:after {
  margin-left: 1em; 
}
.story p:nth-of-type(2){
  width: 980px;
  font-size: 1.6em;
}
#story,.story p{
  height: auto;
  font-family:serif;
  justify-content: center;
  text-align: center;
  margin: auto;
  color: #fff;
  font-weight: bold;
  line-height: 2.0em;
}
.movie{
  position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%) translateY(-30%);
    min-width: 100vw;
    min-height: 100vh;
    filter:brightness(40%) ;
}

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

回答1件

ベストアンサー

スマホサイズでも可読フォントサイズで表示されているようです。

remを使用されていますが、htmlタグに対してremの基準となるfont-sizeが指定されていないようです。
指定しなくても問題ありませんが、もし、1.6rem = 16pxのように、CSSにおけるfont-size管理を分かりやすくする方法を取るのであれば、下記のようにすると良いです。

CSS
1html {
2  font-size: 62.5%; // = 1remの基準値
3}

「rem 62.5」でググると、より詳しい解説が見れると思います。

投稿2022/01/09 15:08

monocode

総合スコア16

takamaru_28

2022/01/10 10:39

参考になりましたありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

動画の上の文字が画面の大きさが小さくなっても表示できるようにしたい

関連した質問