モーダルウインドウにYouTubeの動画を埋め込み、かつレスポンシブ対応にしたい。

Question

前提

ボタンをクリックすることで、YouTubeの動画を埋め込んだモーダルウインドウを表示する機能を作成しています。
下記は動作サンプルです。
サンプル

YouTube動画の下にある閉じるボタンを押すか、動画とボタン以外の領域をクリックすることで、モーダルウインドウが閉じられます。

React.jsとstyled-componentsを使用しています。

埋め込んだ動画のレスポンシブ設定は下記ページを参考にしました。
Youtube 動画の埋め込みをCSSでレスポンシブ対応する方法 - HAM MEDIA MEMO

発生している問題

画面が横長の場合かつ縦横比によってはモーダルウインドウの上下が画面外へはみ出してしまいます。

問題が発生している状態の画像を下記に貼ります。
下記画像の状態は、codesandboxのBrowserタブを新規ウィンドウで表示し、Chromeのデベロッパーツールのデバイスをシミュレーションできるツールで確認しました。

実現したいこと

縦横比を維持したまま、モーダルウインドウが画面外へはみ出さないようにしたいです。

実現したいことが実装できた場合、前述の問題が発生する縦横比のケースではモーダルウインドウの縦サイズに合わせて横サイズが縮むかと思いますが、縦横比の維持を優先したいです。

該当のソースコード

export default function Modal({ setOpen }) {
  return (
    <ModalWrap>
      <ModalBackground onClick={() => setOpen(false)} />
      <VideoWrap>
        <iframe
          width="560"
          height="315"
          src="https://www.youtube.com/embed/mxK8b99iJTg"
          frameBorder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          title="modal"
        />
      </VideoWrap>
      <CloseButton onClick={() => setOpen(false)}>close</CloseButton>
    </ModalWrap>
  );
}

const ModalWrap = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

const ModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(100, 150, 100, 0.5);
`;

const VideoWrap = styled.div`
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 1rem;
  }
`;

const CloseButton = styled.button`
  z-index: 1;
`;

試したこと

動画と閉じるボタンを含んだdiv要素にmax-heightを設定することで、上下のはみ出しを防げるかと思いmax-height: 90vh;やmax-height: 90%;を設定してみたのですが、効きませんでした。

Answer 1

ページ拝見しました。
スタイルを修正すれば解決できそうです。
ModalWrapにright、margin、max-widthの３つのスタイルを追加すればOKだと思います。
スタイルを追加したコードは以下です（max-widthの値はお好みでどうぞ）。

const ModalWrap = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100vw;
  max-width: 196vh;
  height: 100vh;
  box-sizing: border-box;
  padding: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
`;

【解説】
max-heightが効かなかった原因は、iframeの親要素（VideoWrap）がpadding-bottomを使って高さを指定しているためです。
paddingはパーセントを指定すると親要素の幅を基準に計算してくれるプロパティです。
paddingは要素の高さにも影響するのですが、heightとは別の値として扱われるのでmax-heightを指定しても効かない、という特徴もあります。

そこで高さの代わりにmax-widthで親要素の幅を制限することで、幅を基準に計算するpadding-bottomの値を制限しています。

Comments

[whoiwhoi]

お礼が遅れてしまい申し訳ありませんでした。ご教示いただいたコードで希望通りのスタイルが適用できました。本当にありがとうございました。