Перейти к публикации

Убрать нижний отступ под видео


Рекомендованные сообщения

Здравствуйте!
Простите, если не сюда пишу.
Уже несколько дней не могу найти свою ошибку.
Прошу помощи.

Пишу сайт.
Вверху страницы горизонтальное меню - фиксированное.
Под горизонтальным меню вставляю видео с текстом. Видео затеняется с помощью overlay.
Все вставляется, но под видео большой отступ, заполненный тенью от видео.

Как убрать большой отступ?
На скрине выделена область, которую необходимо убрать.
Сильно не пинайте, пожалуйста, только начинаю изучать это дело.

Сайт запускаю на OpenServer. В веб еще не выкладывал.

Index

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Мой сайт</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" type="text/css" href="style/style-video.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather|PT+Sans+Caption:400,700&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="favicon/favicon.ico">

 </head>
 <body>
   <div class="fullscreen-bg">
    <div class="overlay">
        <h1>Простой пример<br>фонового видео на сайте</h1>
    </div>
    <video loop="" muted="" autoplay="" poster="video/fotopromo.png" class="fullscreen-bg__video">
        <source src="video/videopromo.mp4" type="video/mp4">
    </video>
</div>
  <?php
include('header.php');
?>
  <div class="layout">
<?php
include('nav.php');
?>
   <div class="content">
    <h1>Название страницы</h1>
    <p>Бла-бла.</p>	
   </div>   
   </div>
   <?php
include('footer.php');
?>
 </body>
</html>

Style-video

.fullscreen-bg {
    overflow: hidden;
    z-index: -100;
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 45%;
}
 
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.overlay {
    background: rgba(0,0,0,0.6);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 4;
}

.overlay h1 {
    text-align:center;
    color:#fff;
    font-size: 70px;
    margin-top:17%;
}
@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('../video/fotopromo.png') center center / cover no-repeat;
    }

    .fullscreen-bg__video {
        display: none;
    }
		.overlay h1 {
	    font-size: 40px;
	}
}

Понимаю, что строка 7 в коде style-video отвечает за это, но не знаю как правильно ее прописать.
Сейчас там прописано: padding-top:45%;
При уменьшении процента, на моем экране хорошо отображается.
Но что будет на других экранах?
При уменьшении окна браузера, тень опять появляется.

Screenshot_2021-01-23 Мой сайт.png

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

  • Статистика пользователей

    47 319
    Всего пользователей
    1 451
    Рекорд онлайна
    Mollykng
    Новый пользователь
    Mollykng
    Регистрация
  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...