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

требования:

  • HTML: iframe и находиться внутри содержащего div. См. код ниже.
  • CSS: контейнер должен иметь любой действительный width и height С помощью vw и vh просмотра единиц. Код Se ниже.
  • да width и height HAS о vw и vh.
  • статическое изображение предварительного просмотра видео должен!--12-->никогда быть обрезаны.
  • статический видео изображение должно не есть черные полосы выше и ниже (letterboxing).
  • статический видео изображение должно не есть черные полосы слева или справа (pillarboxing).
  • статическое изображение предварительного просмотра видео должно использовать как можно больше пространства внутри div, который его содержит.
  • статическое изображение превью всегда сохранить соотношение сторон 16:9.
  • полосы прокрутки должны никогда появляются.
  • статическое изображение предварительного просмотра видео должно быть центрировано по вертикали, а также по горизонтали внутри div, который его содержит.
  • Адаптивный Веб-Дизайн.

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

HTML-код:

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

в CSS:

.container {
   width:90vw;
   height:50vh;
}
12
css html iframe javascript responsive-design

8 ответов

используя 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>
3

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

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

Если вы хотите отзывчивый использовать

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

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

3

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

3

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

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

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

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

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

2

Я бы рекомендовал использовать окно 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%; сверху: 50%; в вашем CSS. При обновлении cW и cH, также обновить margin-left:-(cW/2); margin-top: - (cH/2);

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

2