0
私は、モーダルに埋め込みコード（ビデオ）であるhtmlファイルを使用しています。フルスクリーンをクリックすると、モーダルのビデオに合っています。私は画面全体に（モーダルサイズを変更することなく）したいです。モーダルで全画面表示を許可する方法は？
マイコード：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My page</title>
</head>
<body>
<div id="modal" style="left:50%;transform:translateX(-50%) translateY(-50%);top:50%;position:absolute;width:900px;height:545px;background:darkgrey;display:none;padding:1em;margin:auto;">
<button id="closebtn">Close</button>
<iframe id="iframeid" style="width:100%;height:93%"></iframe>
</div>
<button id="openIframe" href>OPEN</button>
<script>
var m = document.getElementById('modal');
var b = document.getElementById('openIframe');
var i = document.getElementById('iframeid');
var x = document.getElementById('closebtn');
x.addEventListener("click",function(){
m.style.display = "none"
})
b.addEventListener("click",function(){
console.log('dsadas')
i.src = "Mypage.html"
m.style.display = "block";
})
</script>
</body>
</html>
Mypage.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>My page</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head prefix="og:http://ogp.me/ns#">
<title>My page</title>
<meta charset="utf-8">
<meta property="og:url" content="https://content.jwplatform.com/previews/4GWinBap">
<meta property="og:title" content="My page">
<meta property="og:image" content="https://assets-jpcust.jwpsrv.com/thumbs/4GWinBap-720.jpg">
<meta property="og:type" content="video">
<meta property="og:video" content="https://content.jwplatform.com/players/4GWinBap.swf">
<meta property="og:video:secure_url" content="https://content.jwplatform.com/players/4GWinBap.swf">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="320">
<meta property="og:video:height" content="260">
<meta name="twitter:card" content="player">
<meta name="twitter:player" content="https://content.jwplatform.com/players/4GWinBap.html">
<meta name="twitter:player:width" content="320">
<meta name="twitter:player:height" content="260">
<meta name="twitter:player:stream" content="https://content.jwplatform.com/videos/4GWinBap-480.mp4">
<meta name="twitter:player:stream:content_type" content="video/mp4; codecs="avc1.42E01E, mp4a.40.2"">
<style type="text/css">
body { margin:0 auto; padding:0; background:#EEE; overflow: hidden; }
#title { font:bold 24px/36px Arial, sans-serif; color:#000; margin:40px auto 10px auto; display:none; text-shadow:#FFF 2px 2px 0; }
#description { font:13px/20px Arial, sans-serif; margin:15px auto; display:none; text-shadow:#FFF 1px 1px 0; }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1 id="title">My page</h1>
<div id="botr_4GWinBap_ilaHck0R_div"></div>
<script type="text/javascript" src="https://content.jwplatform.com/players/4GWinBap-ilaHck0R.js"></script>
<p id="description"></p>
<script>
if (window == window.top) {
document.getElementById("title").style.display = "block";
document.getElementById("description").style.display = "block";
document.body.style.width = "70%";
} else {
/** Used to pass play/pause messages parent iframe via postMessage **/
window.addEventListener("message", function(evt) {
switch (evt.data) {
case "play":
jwplayer().play();
break;
case "pause":
jwplayer().pause();
break;
}
});
}
</script>
</body>
</html>
私はこのことを無視しました。なぜそれが必要なのかわかりません。 –
「あなたの投稿は主にコードなので、詳細を追加してください」と言っています。 –
実際には、コードを入力して詳細を追加しないと、役に立たないことがあります。 – Jer