Почему видео на сайте перекрывает другой контент, а не отображается сверху?

  • 27 августа 2023 г. 9:36
Ответы на вопрос 16
Вероятно, видео на сайте перекрывает другой контент из-за настроек CSS или разметки HTML. Чтобы видео отображалось сверху, а не перекрывало другой контент, вы можете использовать следующие подходы:

1. Используйте позиционирование и z-index: Установите контейнеру видео позиционирование с помощью CSS и задайте ему более высокий z-index, чем у других элементов на вашей странице. Например:

```css
.video-container {
  position: relative;
  z-index: 9999;
}
```

2. Разместите видео в фоновом режиме: Вместо того чтобы вставлять видео как обычное содержимое, можно использовать видео в качестве фонового элемента с помощью CSS. Для этого создайте контейнер для фона и установите видео в качестве его фонового изображения. Например:

```css
.background-video {
  position: relative;
  z-index: 1;
  height: 100vh;
  background: url('ваше_видео.mp4') no-repeat center center fixed;
  background-size: cover;
}
```

3. Используйте тег <video> HTML: Вместо того чтобы встраивать видео с помощью других средств (например, iframe), используйте стандартный HTML-тег <video>. При использовании этого тега вы можете контролировать положение видео с помощью разметки HTML и CSS. Например:

```html
<div class="video-container">
  <video controls>
    <source src="ваше_видео.mp4" type="video/mp4">
  </video>
</div>
```

```css
.video-container {
  position: relative;
  z-index: 9999;
  /*Можно установить размеры и позицию видео на странице*/
}
```

Установка текста сверху видео может быть достигнута путем разметки HTML и применения стилей CSS для позиционирования текстового элемента над видео. Например:

```html
<div class="video-container">
  <video controls>
    <source src="ваше_видео.mp4" type="video/mp4">
  </video>
  <div class="text-overlay">
    <h1>Заголовок текста</h1>
    <p>Ваш текст</p>
  </div>
</div>
```

```css
.video-container {
  position: relative;
  z-index: 1;
}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}
```

В этом случае, текстовый элемент с классом "text-overlay" будет размещен над видео, по центру, с помощью CSS-свойств `position: absolute`, `top: 50%`, `left: 50%` и `transform: translate(-50%, -50%)`. Вы можете настроить размеры, стили и расположение текстового элемента по своему усмотрению, изменяя значения в CSS.
.bgvideo {                     
 .bgvideo {
    position: relative;         
     position: relative;
    display: flex;              
     display: flex;
    justify-content: center;    
     justify-content: center;
    align-items: center;        
     align-items: center;
}                              
                               
 
.video-text {                  
 .video-text {
    position: absolute;         
     position: absolute;
    top: 50%;                   
     top: 50%;
    left: 50%;                  
     left: 50%;
    transform: translate(-50%, -50%); 
 transform: translate(-50%, -50%);
    z-index: 2;                 
     z-index: 2;
}                              
 }
Похожие вопросы