動画をど真ん中で固定するとブラウザのサイズによって上に突き出てしまう

動画を真ん中で固定配置した場合
画像のようにブラウザサイズによっては動画が上にはみ出てしまいます。
これ以上、上にいかせないなどの方法ないでしょうか。。
また、皆さんどういった回避方法しておりますかご教授いただけますと幸いです。

※スマホ横向き時は動画の固定配置をなしにして、スクロールで見れるようにしています。

html
1    <body class="broadcast">
2        <div class="content">           
3            <h1>TITLE</h1>
4            <div class="content__outside center">
5               <div class="content__video-wrap">
6                    <iframe src="https://player.vimeo.com/video/*****" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
7                </div>
8            </div>
9        </div>
10    </body>

css
1.broadcast .content__outside{
2    max-width: 1300px;
3    width: 80%;
4    margin: auto;
5}
6.content__video-wrap{
7    width:100%;
8    padding-bottom: 56.25%;  //16:9
9    height:0px; 
10    position: relative;
11}
12.content__outside iframe{
13    position: absolute;
14    top: 0;
15    left: 0;
16    width: 100%;
17    height: 100%;
18}
19.center{
20    position: absolute;
21    top: 50%;
22    left: 50%;
23    transform: translate(-50%,-50%);
24}
25
26//スマホ横向き時は固定配置なし
27@media (max-width: 896px) and (orientation: landscape) {
28    .broadcast .center{
29        position: initial;
30        transform: initial;
31    }
32}
33

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

回答1件

ベストアンサー

動画の場合動画に対する比率で変わるので
CSS には vw, vh, vmin, vmax という単位がある

CSS
1.broadcast .content__outside {
2    max-width: 1300px;
3    width: 120vh;　/* ここで調整してみて */
4    margin: auto;
5}

今回の場合、幅を高さを基準に設定すれば良いかと。

投稿2020/09/22 23:42

kuma_kuma_

総合スコア2506

nana_ton

2020/09/26 08:30

上記の対応でmax-width:100%以下にしておくと縦長スマホでもはみ出ること無さそうです。ご回答ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

動画をど真ん中で固定するとブラウザのサイズによって上に突き出てしまう

関連した質問