モーダルウィンドウ内に埋め込んだYouTubeの縦横比が崩れる。並びにモーダルウィンドウの上部がはみ出してしまう。

前提

ボタンを押すことでモーダルウィンドウを表示する機能を作っています。

ボタンAを押すと埋め込んだYouTubeが含まれるモーダルAが表示されます。
ボタンBを押すとテキストのみが含まれるモーダルBが表示されます。

発生している問題

◆上記動作サンプル（JSBin）の画面上部にあるHTML～Outputタブの内、Outputタブのみを表示させた状態でモーダルAを表示すると、埋め込んだYouTubeのサムネの上下が欠けてしまいます。

再生すると元サイズの縦横比を保ったまま再生されますが、動画の両端に余計な黒い部分ができてしまいます。

逆にタブを全て表示した状態だとサムネの両端が欠けてしまい、再生すると動画の上下に余計な黒い部分ができてしまいます。

◆HTML～Consoleタブの内、2つ～3つを表示させてからモーダルBを表示すると、モーダルBの上部がはみ出してしまいます。
下にはみ出した分は下へスクロールすることで閲覧できますが、上にはみ出した分は上へスクロールできないため、閲覧できない状態です。

また、細かな問題ではありますが、モーダルBの縦サイズがウインドウサイズいっぱいまで広がっているため余白が無くなってしまいました。

実現したいこと

動画の元縦横比を保ったまま埋め込みたいです。

ウィンドウサイズが小さくなった場合でも同様に元縦横比を保ったまま埋め込みたいです。
動作サンプルに比べてモーダルウィンドウのサイズが小さくなりますが、埋め込みサイズを優先したいです。

◆モーダルBの上部がはみ出さないようにしたいです。下部についてははみ出しを許容し、下へスクロールすることで閲覧できる状態にしたいです。
また、モーダルの上下は余白を付与したいです（文章が多くて下にはみ出す場合は余白は上のみ）

該当のソースコード

css
1html {
2  text-align: center;
3}
4
5h1, h2, p {
6  margin: 0;
7}
8
9h2{
10  margin-bottom: 2.5%;
11}
12
13.modals {
14  display: none;
15}
16
17#modalArea {
18  position: absolute;
19  display: flex;
20  top: 50vh;
21  left: 50vw;
22  transform: translate(-50%, -50%);
23}
24
25.modals {
26  color: white;
27  background-color: black;
28  width: 80vw;
29  padding: 5%;
30}
31
32#a {
33  margin: auto;
34}
35
36#video {
37  margin: 2.5%;
38}
39
40#video iframe {
41  width: 100%;
42  margin: auto;
43}
44
45#b {
46  margin: auto;
47}
48
49#b p {
50  line-height: 2em;
51  margin: 2.5%;
52  text-align: left;
53}

html
1<h1>open modal</h1>
2<button id="openA">A</button>
3<button id="openB">B</button>
4
5<!-- modal -->
6<div id="modalArea">
7　<div class="modals" id="a">
8  　<h2>A</h2>
9    <p>チョコレートケーキ</p>
10    <div id="video">
11    　<iframe width="560" height="315" src="https://www.youtube.com/embed/dsJtgmAhFF4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
12    </div>
13    <button class="modalClose"><i class="far fa-times-circle"></i>close</button
14　</div>
15  <div class="modals" id="b">
16  　<h2>B</h2>
17    <h3>ピザ</h3>
18    <p>イタリアで生まれ、世界的に広く食べられている料理である。また、ピザの発祥がリトアニアという説もある。日本で初めて紹介されたピザはなかなか一般的ではなかったが、1980年代後半より始まったバブル景気の最中に起きたイタリア料理ブームに伴い、次第にイタリア風のものも広く知られるようになっていった。</p>
19    <p>日本を含む先進各国では、家庭向けの冷凍食品からレストランや専門店などの飲食店で提供されたり、あるいは電話などで注文する宅配サービスでも購入することができるため、一般になじみのある料理である。</p>
20    <p>数多くのレシピが存在し、地域にある産品を取り込んだご当地グルメ的変化を見せるものも存在する。料理として提供される場合には、好みによって様々な食材が選択可能であることにもちなみ、広い層に人気のある料理である。</p>
21    <button class="modalClose"><i class="far fa-times-circle"></i>close</button>
22　</div>
23</div>
24
25<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

javascript
1$("#openA").on("click", () => {
2    $("#a").show();
3});
4$("#openB").on("click", () => {
5    $("#b").show();
6});
7
8$(".modalClose").on("click", () => {
9    if ($("#a").is(":visible")) {
10        $("#a").hide();
11    };
12    if ($("#b").is(":visible")) {
13        $("#b").hide();
14    };
15});

試したこと

モーダルAの問題については、
Youtube動画の埋め込み方法
上記ページに記載されている、

css
1.video{
2  position:relative;
3  width:100%;
4  padding-top:56.25%;
5}
6.video iframe{
7  position:absolute;
8  top:0;
9  right:0;
10  width:100%;
11  height:100%;
12}

上記コードを試してみました。
小さいウインドウサイズでは希望通りのレイアウトになりましたが、大きいウインドウサイズだとモーダルの上部がはみ出てしまいました。

モーダルBの問題については、どのように調べたらよいか分かりませんでした。

H40831

2019/09/16 14:03 編集

うんうん。Youtubeの埋め込みってほんと意味不明なんですよね〜

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

回答1件

ベストアンサー

youtube埋め込みの縦横比の固定についてはYoutube動画の埋め込み方法の通りで大丈夫です。

可変のモーダルウィンドウを上下左右中央寄せにするとコンテンツの大きさによってはみ出てしまう問題ですが、
CSSだけで対応するのは難しそうなのでjQueryを利用してみました。

css
1#video {
2  position: relative;
3  width: 100%;
4  padding-bottom: 56.25%;
5}
6
7#video iframe {
8  position: absolute;
9  top: 0;
10  left: 0;
11  width: 100%;
12  height: 100%;
13  margin: auto;
14}

javascript
1const adjustHeight = () => {
2  // bodyに対するモーダルウィンドウの高低差
3  let heightDiff = $('#modalArea').height() - $(window).height();
4
5  // モーダルウィンドウの高さがbodyの高さより大きいとき、高低差の半分 + 余白分だけ下にずらす
6  if(heightDiff > 0) {
7    $('#modalArea').css('top', `calc(50vh + ${heightDiff / 2 + 20}px)`);
8  } else {
9    $('#modalArea').css('top', '50vh');
10  }
11};
12
13$(window).on('resize', adjustHeight);
14
15$("#openA").on("click", () => {
16  $("#a").show();
17  adjustHeight();
18});
19$("#openB").on("click", () => {
20  $("#b").show();
21  adjustHeight();
22});
23
24$(".modalClose").on("click", () => {
25  if ($("#a").is(":visible")) {
26      $("#a").hide();
27  };
28  if ($("#b").is(":visible")) {
29      $("#b").hide();
30  };
31});