有没有办法让 iframe 全屏显示？

Question

我想将一个 iframe 放到我的页面上，并在 iframe 顶部放置另一个 div 以返回到特定页面，但是，我似乎无法让 iframe 进入全屏（高度:100% 和宽度：100%)。是否有任何解决方法可以全屏显示 iframe？

我已经尝试使用 jquery 将高度设置为 window 高度，但是，它不起作用。

<style>    
    iframe {
      height:100%;
      width:100%;
    }

    .goback {
      width:100%;
      background-color:transparent;
      transition:.5s;
      position: absolute;
      z-index:3;
    }

    .goback img {
      padding:5px;
    }

    .goback:hover {
      background-color:white;
    }
</style>
<body>
    <div class="goback">

        <img src="../../assets/goback.png" alt="goback" height="50px" width="50px" />

    </div>

    <iframe src="https://music.youtube.com/"></iframe>

</body>

Answer 1

使用视口宽度和高度而不是百分比

iframe {
  height:100vh;
  width:100vw;
 }

Answer 2

您应该修改您的 css（将正文边距设置为 0，定位 iframe 绝对并将边框设置为 0）

示例：

body {
  margin: 0;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  height:100%;
  width:100%;
  border: 0;
}

Answer 3

使用

 width:100%; height:100vh;

iframe.

有没有办法让 iframe 全屏显示？

Is there a way to have an iframe in fullscreen?

html

css

iframe

fullscreen