Question

我有一个模态使用一个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=&quot;avc1.42E01E, mp4a.40.2&quot;">
<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>

Answer 1

由于您的“模态”视频正在IFRAME中加载，因此您需要告知IFRAME遵守源自子页面的全屏请求。

尝试将 allowfullscreen 属性添加到IFRAME标记中。

如何在模态上允许全屏？

1 个答案: