删除视频周围的 iframe 空白？答案

【问题标题】：Removing iframe white space around videos?删除视频周围的 iframe 空白？
【发布时间】：2018-03-26 05:05:13
【问题描述】：

如何摆脱 iframe 创建的额外空白？我正在使用对 Web 应用程序的引用，但据我所知，它应该延伸到任何 16:9 纵横比的窗口。但是这并没有发生。其他视频似乎也会发生这种情况，但侧面通常是透明的。有没有办法我可以在这里做到这一点？谢谢

HTML：

<body background="images/Background.png">
    <iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
        <p> Your browser does not support iframes. </p>
    </iframe>
    <button id="restart" left="1%">Start Over</button>

</body>

CSS：

#videoWrapper{
  height: 100%;
}

#primaryVideo{
  width: 80%;
  height: 80%;
  border: none;
  position: absolute;
  float: left;
  display: inline;
}
div{
  text-align:center;
}

【问题讨论】：

让你的 iframe 更小？（宽度/高度样式）还是您希望视频更大？
看不到代码就帮不上忙
@abney317 我确实希望视频适合框架，但即使我将宽度/高度变小，也总是至少有一些空白。
@JoeWarner 这是所有相关代码

标签： javascript html iframe

【解决方案1】：

我深入研究了该地址的布局，找到了视频的真实位置。我应用了这个旧的但仍然相关的article 建议的样式。它是 100% 响应的。如果您不希望它与视口一样大，请相应调整div.frame 的宽度。

Demo 1 是 iframe 中的实际视频，Demo 2 是 iframe 中包含视频的网站。 Demo 2 中的播放器看起来像 videoJS 插件，所以如果你通过它播放视频，那么尺寸取决于仍然响应的站点。您看不到它在 SO 上运行，因为相关站点不支持 https。看看这个Plunk。

演示1

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

<div class='frame'>
  <iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>

演示 2 请参阅 Plunk 以了解正常运行的演示

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.frame {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

<div class='frame'>
  <iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>

【讨论】：

感谢您所做的一切。我需要网络应用程序才能工作，所以演示 2 是这里的相关应用程序。当我使用视频的原始大小 (960x540) 尝试此代码时，它具有我在 Plunk 上也看到的空白区域。它可以最小化，空白会消失，但是因为你可以点击视频，所以它需要保持 960x540。因此，当我尝试使 iframe 完全为 960x540 时，它会强制视频变小。我唯一的选择是让它比 960x540 略大，这会导致那个丑陋的白色区域。无论如何要摆脱它或使其透明？我试过background-color
澄清一下，它需要保持该大小的原因是因为它使用依赖于 960x540 的 XML 背景数据进行操作
当在我的 1366x768 屏幕上展开时，它的 1140x627（如果你包括下面的额外空间，它大约是 678 像素）。当您调整它的大小时，它会跳转到下一个断点，看起来好像媒体查询（或它们使用的任何视口调整大小）不连续。我不确定您如何控制这种行为，除非您拥有该网站或该网站是否有 API。
感谢您帮助我找到了问题。如果这就是你的意思，我确实可以访问应用程序网站，我在这里问了一个更好的问题：stackoverflow.com/questions/49523986/…