Question

如何在自己的iFrame中使用嵌入式网站的“全屏”全屏打开而不是“全文”全屏？

<body>
<iframe><!--youtube in fullscreen here--></iframe>

<!--still displaying normal website(with fullscreen iframe)-->

<body>

询问您是否需要澄清。（很难描述）：）

Answer 1

您可以使用position:fixed，如下面的代码所示。

*{
  margin:0;
  padding:0;
}
iframe{
  position: fixed;
  height: 100%;
  width: 100%;
  border:none;
}

<iframe src="http://stackoverflow.com"></iframe>

Answer 2

您可以在iframe HTML标记上使用以下内联样式。

基本上你可以使用：

position:fixed将您的iframe相对于您的视口定位，这意味着即使滚动页面，它也始终保持在同一位置。

width:100%; height:100%将iframe的大小设置为视口（这样可以创建全屏效果）。

<iframe src="http://your-iframe-here.com" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
</iframe>

Answer 3

你可以简单地使用嵌入式youtube功能，因为我正在阅读这个，你只想要视频，而不是网站

Link for Tutorial

如何使嵌入式网站的全屏仅占用iframe？

3 个答案: