Question

如何摆脱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;
}

Answer 1

I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.

Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.

Demo 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>

Demo 2 see Plunk for a functioning demo

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>

删除视频周围的iframe空白区域？

1 个答案:

Demo 1

Demo 2 see Plunk for a functioning demo