Размеры Iframe

Если у <iframe> указать width="100%", то он растянется на всю ширину родителя, но height="100%" так не работает.

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<iframe src="https://www.youtube.com/embed/lmc21V-zBq0" frameborder="0"></iframe>

	<style type="text/css">
	iframe {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	</style>
</body>
</html>
HTML

Если нужно растянуть iframe на всю ширину и высоту родителя:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="box">
		<iframe src="https://www.youtube.com/embed/lmc21V-zBq0" frameborder="0"></iframe>
	</div>

	<style type="text/css">
	.box {
		position: relative;
		width: 500px;
		height: 200px;
	}
	iframe {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
	}
	</style>
</body>
</html>
HTML
09.04.2019, обновлено 31.08.2019 767

Поделится

Темы

CSS HTML

Другие публикации

В статье представлены все самые встречающеюся мета-теги с примерами и пояснениями их использования.
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
Сборник CSS стилей с эффектом фильтров Инстаграма.
Библиотека GD дает возможность работать с изображениями в PHP. Далее представлены примеры как изменить размер, вырезать...
Сборник горизонтальных линий с тегом hr разных видов и стилей.