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

How do I make embedded website's fullscreen to occupy iframe only?

本文关键字：iframe 何使 嵌入式 网站      更新时间：2023-09-26

我如何使一个嵌入式网站的"全屏"打开全屏内自己的iFrame而不是"文字"全屏?

<body>
<iframe><!--youtube in fullscreen here--></iframe>
<!--still displaying normal website(with fullscreen iframe)-->
<body>

询问是否需要澄清。(很难形容):)

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

*{
  margin:0;
  padding:0;
}
iframe{
  position: fixed;
  height: 100%;
  width: 100%;
  border:none;
}
<iframe src="http://stackoverflow.com"></iframe>

你可以简单地使用嵌入的youtube功能，因为我是如何阅读这篇文章的，你只是想要视频，而不是网站

教程链接

你可以在你的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>
相关文章：