Задать вопрос
@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>
  • Вопрос задан
  • 16044 просмотра
Комментировать
Подписаться 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 комментария
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы