Задать вопрос
@inftsukuyomi
html

Как выровнять видео по центру блока div?

Здравствуйте, я новичок в HTML, хочу отцентровать видео, div предал размеры body и в div вписал видео.
body{
	background-image: url(https://www.tokkoro.com/picsup/5400282-anime-hd-4k-night-scenery.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}
.video{
	width: 30%;
	height: 100vh;
    margin: 0 auto;
    display: block;
    text-align: center;
}


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>the end.</title>
	<link rel="stylesheet" href="style.css">
	<link rel="icon" type="image" href="https://yt3.ggpht.com/a/AGF-l78FVXS9EAPSsm1xMnreqDKnKy7kbSbyn74slA=s900-c-k-c0xffffffff-no-rj-mo">
</head>
<body>
	<div class="video">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/H1Vnys_GC4Y?controls=0&amp;start=7;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</body>
</html>
  • Вопрос задан
  • 17449 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@ovodovod
I am Software Engineer
Положите элемент <div class="video"></div> в <div class="container"></div> и для контейнера задайте следующие стили:
.container {
  display: flex;
  justify-content: center;
  align-items: center; // если нужно выравнивание по вертикали
}

Верстка:
<div class="container">
    <div class="video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/H1Vnys_GC4Y?controls=0&amp;start=7;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>


Про выравнивание элементов с помощью Flexbox можно почиать на HTML5Book.
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Юзабилити-аудит, комплексная проверка веб приложения
25 нояб. 2024, в 20:10
5000 руб./за проект
Во Flutter доделать функцию из Ton блокчейна (выставление на продажу)
25 нояб. 2024, в 19:44
20000 руб./за проект
Перенести сайт на CMS Wordpress c Tilda
25 нояб. 2024, в 18:33
10000 руб./за проект
Ещё заказы