mp4コンテンツを画面中央にモーダル表示させたい

前提

質問者は素人です。
専門用語の使い方が間違っている可能性があります。
何卒お許しください。

実現したいこと

imgをクリックするとmp4コンテンツをポップアップ表示にて再生するところまではできました。
しかしながら、mp4コンテンツが画面中央ではなく左上(top:0; left:0;)で表示されてしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<div id="contents">
2<div id="main">
3<div id="mainInr">
4<h1 class="head01">設備紹介</h1>
5<div class="basicFlt">
6<ul class="fltList clm3">
7<li><p class="pink bold center size18"></p> 
8<img class="popupBtn" src="images/facility01.jpg" alt="">
9  <div class="popup">
10      <video playsinline muted autoplay src="images/facility01.mp4" loop class="popup-content"></video>
11      <div class="btn-close">閉じる</div>
12  </div>  
13</li>
14…

css
1@charset "UTF-8";
2/* CSS Document */
3
4#mv {
5    background: url(/about/images/mv.png) center top no-repeat !important;
6}
7
8
9
10.head01{
11	overflow: hidden;
12}
13
14.head01 p.year{
15	float: left;
16	margin-left:40%;
17	font-size: 1em !important;
18}
19
20.head01 p.day{
21	float: right;
22	margin-top: 20px;
23	font-size: 12px;
24}
25
26
27
28
29@media only screen and (max-width: 750px) {
30	
31.head01 p.year{
32	/* float: left; */
33	font-size: 1em !important;
34	margin-left:0px;
35}
36
37.head01 p.day{
38	float: right;
39	margin-top: 0px;
40}	
41	
42	
43}
44
45/* 全体設定 */
46* {
47	box-sizing: border-box;
48}
49  
50
51  /* ポップアップウインドウの設定 */
52.popup {
53	background-color: rgba(0,0,0,.7);
54	display: none;
55	position:fixed;
56	top: 0;
57	left: 0;
58	/*right: 0;
59	bottom: 0;
60	margin: 0 auto;*/
61	width: 100%;
62	height: 100%;
63	/*overflow-y: auto;*/
64  }
65
66.popup-content{
67	background: #fff;
68	/*padding: 30px;
69	height: 80%;*/
70	width: 80%;
71	display: flex;
72	justify-content: center;
73	align-items: center;
74}
75
76.flex{
77	display: flex;
78	justify-content: center;
79	align-items: center;
80}
81
82  /* 閉じるボタン */
83.btn-close{
84	background: #000;
85	border-radius: 10px;
86	color: #E7656D;
87	padding: 10px;
88	margin: 10px;
89	width: 80%;
90	text-align: center;
91}
92
93  
94  @media only screen and (max-width: 750px){
95	  video {	max-width: 100%; }
96}

js
1$(document).on("click", ".popupBtn", function() {//$("要素").click だとjsを読み込んだ時点で"要素"が存在しない為NG
2  $(".popup")
3    .show()
4    .addClass("flex")
5});
6  
7$(document).on("click", ".btn-close", function() {
8  $(".popup").fadeOut();
9});
10

試したこと

videoタグの親要素にクラスpopup-contentを追加し「display: flex;」を指定しましたが何も変わりませんでした。

html
1<img class="popupBtn" src="images/facility01.jpg" alt="">
2  <div class="popup">
3    <div class="popup-content">
4      <video playsinline muted autoplay src="images/facility01.mp4" loop"></video>
5      <div class="btn-close">閉じる</div>
6    </div>
7  </div>  
8</li>
9…

何卒よろしくお願い致します。

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

回答1件

ベストアンサー

こうですか？

css
1        .flex {
2            display: flex;
3            justify-content: center;
4            align-items: center;
5            flex-wrap: wrap; /* 追加 */
6        }

js
1                                $(".popup")
2                                    //.show() ←消す
3                                    .addClass("flex")

投稿2022/07/15 08:46

Lhankor_Mhy

総合スコア37440

t-o

2022/07/15 09:03

早速のご回答ありがとうございます。教えて頂いたコードに変更したところ画面中央に表示することができました。ありがとうございます。ただ、表示→閉じるとするとページをリロードしないとmp4コンテンツが再生されなくなりました。下記jsが原因でしょうか。何卒よろしくお願い致します。 ```jis $(document).on("click", ".btn-close", function() { $(".popup").fadeOut(); }); ```