Горизонтально и вертикально центрированный iframe с соотношением сторон 16: 9, который использует как можно больше свойств экрана без обрезки в любом месте

Требования

  • HTML: iframe HAS находится внутри содержащего div. См. Ниже код.
  • CSS: контейнер должен иметь ЛЮБОЙ действительный width и height с помощью единиц просмотра vw и vh. Se внизу.
  • Да, width и height HAS находятся в vw и vh.
  • Статическое изображение предварительного просмотра изображения должно быть НИКОГДА.
  • Статическое изображение предварительного просмотра видео должно НЕ иметь черные полосы выше и ниже (почтовый ящик).
  • Статическое изображение предварительного просмотра видео должно НЕ иметь черные полосы слева или справа (столбец).
  • Статическое изображение предварительного просмотра изображения должно использовать как можно больше пространства пространства внутри содержащего его div.
  • Статическое изображение предварительного просмотра видео должно ВСЕГДА сохранять соотношение сторон 16: 9.
  • Полоса прокрутки должна выглядеть НИКОГДА.
  • Статическое изображение предварительного просмотра изображения должно располагаться как по вертикали, так и по горизонтали внутри содержащего его div.
  • Отзывчивый веб-дизайн.

При изменении размера браузера или области просмотра все вышеуказанные требования должны быть выполнены.

HTML

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

CSS

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

Ответы

Ответ 1

Используя JavaScript, вы можете прослушивать событие resize, которое срабатывает всякий раз, когда окно браузера меняет форму. Затем, с некоторой простой алгеброй, вы можете рассчитать размеры iframe на основе размеров контейнера. Ниже приведена демонстрация всех требований.

"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);
.container {
	width: 90vw;
	height: 50vh;

	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
<div class="container">
	<iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe>
</div>

Ответ 2

То же решение, но без дополнительной разметки для поддержания отношения.

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>

Ответ 3

если вы хотите Отзывчивое использование

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

Ответ 4

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

Кажется неплохо работать в этой скрипке https://jsfiddle.net/1q10L7hj/

Ответ 5

почему бы вам просто не использовать метод 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 с последующим соответствием.

Ответ 6

Я получил результат, который вам нужен, однако мне пришлось добавить дополнительный div в качестве родителя класса .container. Этот JSFiddle должен работать для пользователей на хром (версия для настольных компьютеров 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 (по крайней мере) это должно быть решение, в котором вы ищете, как указано в перечисленных вами требованиях.

Ответ 7

Я думаю, что отображение табличных ячеек может решить это. Просто примените его к контейнеру, поэтому iframe - это содержимое

В соответствии со спецификациями браузер будет вставлять фиктивные элементы, где он должен правильно отображать ячейку и полностью центрировать и содержать ее содержимое, а если нужно, расти вместе с ним.

Требования: Я думаю, что некоторые из них выходят за рамки вашего вопроса, они также будут зависеть от того, что загружено в iframe, из-под контроля этого документа контейнера. Мой предложенный код прост, но я считаю, что он отвечает всем требованиям для родителя iframe и по-прежнему дружит с crossbrowser.

Запрещенные черные полосы и обязательное соотношение сторон все еще могут быть повреждены в загруженном документе. Если вы не можете контролировать загруженные файлы, последним вариантом могут быть атрибуты "srcdoc" и "бесшовные", но это исключает, например, все версии 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>

Ответ 8

Я бы рекомендовал использовать прослушиватель window.resize JavaScript для решения этой проблемы. Не могу написать код сегодня, потому что у меня довольно жесткий график, но я попробую написать algo:

  • При изменении размера окна, ширине окна расчета (wW) и высоте окна (wH);
  • Определите ширину контейнера (cW) в соответствии с wW (например, cW = wW-10, чтобы получить почти всю ширину - вы можете опустить -10, если хотите);
  • Определите высоту контейнера (cH) согласно вычисленному выше cW: cH = cW * 9/16;
  • Теперь, если cH > wH (т.е. контейнер не подходит к экрану по вертикали, потому что он слишком широк), мы должны пересмотреть cW в зависимости от высоты доступного окна. В этом случае cH = wH-10 (чтобы получить почти все доступное вертикальное пространство - опять же, вы можете опустить -10, если хотите), а затем cW = wH * 16/9;
  • Теперь вы должны иметь действительные cW и cH, чтобы вы могли вставить контейнер в окно, не выходя из экрана, и вы можете применить его к контейнеру.
  • Чтобы центрировать контейнер на экране, используйте позицию: абсолютное, левое: 50%; top: 50%; в вашем CSS. Когда вы обновляете cW и cH, также обновляйте margin-left: - (cW/2); margin-top: - (cH/2);

Это концепция - вы можете импровизировать в соответствии с вашими потребностями. Надеюсь, это поможет.