Question

要求：

HTML：iframe HAS 位于包含div的内部。请参阅下面的代码。
CSS：容器应该能够使用width和height视口单元 ANY 有效vw和vh。 Se代码如下。
是的，width和height HAS位于vw和vh。
静态视频预览图像应从不裁剪。
静态视频预览图片 NOT 上方和下方有任何黑条（letterboxing）。
静态视频预览图片 NOT 左侧或右侧（柱式）有任何黑条。
静态视频预览图像应在包含它的div内尽可能多地使用空间。
静态视频预览图像应始终保持16：9的宽高比。
滚动条应从不出现。
静态视频预览图像应垂直居中，并且在包含它的div内水平居中。
响应式网页设计。

调整浏览器或视口大小时，应满足上述所有要求。

HTML ：

<div class="container">
   <iframe></iframe>
</div>

CSS ：

.container {
   width:90vw;
   height:50vh;
}

Answer 1

相同的解决方案，但没有额外的标记来保持比率。

JsFiddle完全不需要相同的评论。

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
    display:table-cell; /* (specs: omitted table parts, the browser will insert mandatory elements in the dom tree) */
    position:relative;
    padding:; /* optional, margins ignored */
    width:100vw; /* any value */
    height:1vh; /* will expand by the :before element */
    overflow:hidden; /* hide eventual black bars */
    background:tan; /* bg-colors just for demo testing */
    vertical-align:middle;
    text-align:center;
}
.container:before {
    display:block;
    padding-top:56%; /* keeps the 16/9 ratio for the AP */
    height:0;
    background:red;
    content:"\a0";
}
.container iframe {
    position:absolute; /* to be ratio consistent */
    top:-.5%;
    left:-.5%; /* overflow eventual black bars */
    border:0;
    width:101%; /* grow some to avoid thinner black bars */
    height:101%;
    overflow:hidden; /* for html5 browsers the html attribute is depreciated */
    background:gold;
}
</style>
</head><body>

<div class="container">
    <iframe scrolling="no" src=""></iframe>
</div>

</body></html>

Answer 2

如果您想要响应使用

.container, iframe {
  width:100%;
  height:auto;
}

Answer 3

.container {
    width:90vw;
    height:50vh;
}
.container iframe {
    width: 100%;
    height: 100%;
}

似乎在这个小提琴中工作得非常好https://jsfiddle.net/1q10L7hj/

Answer 4

为什么不使用calc方法来获得您想要的宽高比宽度？

<强> HTML

<div class="container">
    <iframe src="" frameborder="0"></iframe>
</div>

<强> SCSS

<style>

$width = 80vw;

.container {
    width: $width;
    height: calc(($width/16) * 9);
    position: relative;
}
iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(+50%, -50%);
    transform: translate(+50%, -50%);
}

</style>

然后你可以在任何地方改变它的宽度，并在容器div和iframe上应用你想要的任何位置

Answer 5

使用JavaScript，您可以收听resize事件，只要浏览器的窗口发生变化就会触发该事件。然后，通过一些简单的代数，您可以根据容器的尺寸计算iframe的尺寸。这是一个显示所有要求的演示。

＆＃13;

"use strict";

var container = document.querySelector('.container');
var frame = container.querySelector('iframe');

function resizeVideo() {
	frame.width = frame.height = 0;

	var width = container.offsetWidth;
	var height = container.offsetHeight;

	if (height * (16 / 9) <= width) {
		frame.height = height;
		frame.width = height * (16 / 9);
	} else {
		frame.width = width;
		frame.height = width * (9 / 16);
	}
}

window.addEventListener('load', resizeVideo);
window.addEventListener('resize', resizeVideo);

＆＃13;

.container {
	width: 90vw;
	height: 50vh;

	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

＆＃13;

<div class="container">
	<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

Answer 6

我已经获得了您想要的结果，但我必须添加额外的div作为.container类的父级。这个JSFiddle应该适用于Chrome上的用户（ Windows桌面版）但是当我尝试在Edge和IE11上使用相同的小提琴时，我发现它会产生不希望的信箱效果到期到图像覆盖太远了。

<强> HTML

<div id="wrapper">
  <div class="container">
      <iframe scrolling="no" src="https://www.youtube.com/embed/YL9RetC0ook" frameborder="0" allowfullscreen>
      </iframe>
  </div>
</div>

<强> CSS

body {
  margin: 0;
}

#wrapper {
  width: 90vw;
  height: 50vh;
}

.container,iframe {
  width: 100%;
  height: 100%;
}

我不确定这是否适用于Firefox，所以如果你有Firefox，你可以在JSFiddle上试试。但是对于Chrome（至少），这应该是您所寻找的解决方案，如您列出的要求所述。

Answer 7

我认为表格单元显示可以解决这个问题。只需将其应用于容器，以便iframe是内容

根据规范，浏览器将插入虚拟元素，它需要正确渲染单元格并完全居中并包含其内容，如果需要，可以随之增长。

要求：我认为其中一些超出了您的问题的范围，它们还将取决于iframe中加载的内容，不受此容器文档的控制。我建议的代码很简单，但我相信它符合iframe父级的所有要求，并且仍然是对浏览器友好的。

禁用的黑条和强制宽高比在加载的文档中仍然有问题。如果您无法控制最新加载的内容，那么最后一个选项可能是＆＃34; srcdoc＆＃34;和＆＃34;无缝＆＃34;属性，但这将排除例如所有IE版本。

JsFiddle完全不需要一些评论。希望下面的编辑能够解决这个问题。

无论如何，我玩得开心！谢谢！：）

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Fully Container Centred Iframe</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.container {
    display:table-cell;
    padding:;
    width:100vw;
    height:20vh;
    background:tan;
    vertical-align:middle;
    text-align:center;
}
.container .ratio{
    display:inline-block;
    position:relative;
    padding-bottom:56%;
    width:100%;
    height:0;
    overflow:hidden;
    vertical-align:middle;
}
.container iframe {
    position:absolute;
    top:-1%;
    left:-1%;
    border:0;
    width:102%;
    height:102%;
    overflow:hidden;
    vertical-align:middle;
}
</style>
</head><body>

<div class="container">
    <div class="ratio">
        <iframe scrolling="no" src=""></iframe>
    </div>
</div>

</body></html>

Answer 8

我建议使用JavaScript window.resize侦听器来解决这类问题。今天无法编写代码导致我的日程安排非常紧张，但我会尝试编写一个算法：

在窗口调整大小时，计算窗口宽度（wW）和窗口高度（wH）;
根据wW确定容器宽度（cW）（比如cW = wW-10以获得几乎所有可用宽度 - 如果需要，可以省略-10）;
根据上面计算的cW确定容器高度（cH）：cH = cW * 9/16;
现在，如果cH＆gt; wH（即容器因为太宽而不能垂直装入屏幕），我们应根据可用的窗口高度修改cW。在这种情况下，cH = wH-10（几乎可以获得所有垂直空间 - 再次，如果需要，可以省略-10），然后 cW = wH * 16/9 ;
您现在应该拥有一个有效的cW和cH，可以让您在不离开屏幕的情况下将容器装入窗口，并且可以将其应用到容器中。
要将容器置于屏幕中央，请使用 position：absolute，left：50％;你的CSS中有top：50％; 。更新cW和cH时，还要更新 margin-left： - （cW / 2）; margin-top： - （cH / 2）;

这是概念 - 您可以根据自己的需要即兴创作。我希望它有所帮助。

水平和垂直居中的iframe，宽高比为16：9，使用尽可能多的屏幕空间而不会在任何地方裁剪

8 个答案: