Блог

Главная - Вопросы по программированию - HTML игнорирует класс контейнера для определенных тегов

HTML игнорирует класс контейнера для определенных тегов

#html #css

#HTML #css

Вопрос:

В моем css-файле есть класс контейнера, который выглядит следующим образом:

 .container {
  width: 1200px;
  margin: 0 auto;
}

Моя цель — разместить видео в классе контейнера, чтобы охватить всю ширину страницы (т. Е. В основном Игнорировать границы).

Мой тег video выглядит так:

 <video class="promo" autoplay><source src="{{ url_for('static', filename='media/vid.mp4') }}"></video>

Блок css для этого класса выглядит так:

 body .promo {
  width: 100%;
  z-index: 0;
}

Прямо сейчас видео выглядит так:
цель
Я проиллюстрировал, чего я пытаюсь достичь с помощью MS paint 🙂

Любая помощь приветствуется

Редактировать:

Вот ссылка на воспроизводимый пример. Вам нужно будет установить Flask .

Комментарии:

1. Пожалуйста, добавьте минимальный воспроизводимый пример.

2. Если я правильно понял, ваш .promo находится внутри элемента с классом .container , который width определяется как 1200px ? Пока элемент ( .promo ) имеет позицию static (по умолчанию) или relative , он всегда будет вести себя относительно своего родительского элемента, это означает, что если у него есть width of 100% , он будет занимать 100% ширины его parent ( .container ) = 1200px

3. Это правильно. Где бы я разместил <video> элемент, чтобы он не наследовал родительские свойства (максимальная ширина 1200 пикселей)?

4. Вы можете просто увеличить размер родительского элемента (установить для него значение 100vw или 100% само по себе), но вы также можете поместить <video> его непосредственно в тело.

5. Пришлось создать второй класс контейнера, который занимал всю ширину страницы, поместить в него видео, а затем класс контейнера размером 1200 пикселей под видео. Спасибо за вашу помощь.

Метки: