есть ли какой-либо способ поместить видео на один экран для всех устройств и для всех браузеров

#html #css

#HTML #css

Вопрос:

у меня есть видео на баннере, и я хочу, чтобы vedio помещался на один экран для всех устройств и для всех браузеров проблема в том, что в Chrome он выглядит меньше по высоте, но выглядит больше в Safari

 .banner{
    position: relative;
  }
  video {
    width: 100%;
  }

 <div className="banner">
               <div className="spread-video">
                  <video playsInline muted autoPlay loop  src={BannerVideo1} type='video/mp4'/>
               </div>
               </div>

1. Итак, если вашему видео не хватает места для правильного отображения в размерах устройства, как вы собираетесь его разместить?

2. Вы пробовали добавлять ширину к видео. <video playsInline muted autoPlay loop src={BannerVideo1} type='video/mp4' width='100%'/>

3. да, я попробовал ширину: 100%

4. просто посмотрите внизу снимка экрана, что черное пространство, которое я хочу заполнить по высоте в termof width, прекрасно

5. не вижу ширину, см. Высоту

Ответ №1:

Используйте медиа-запросы.

 .spread-video{
        @media(max-width: 768px) {
        /*Styles to be executed when screen is narrower than 768px*/
        }
    }

Медиа-запросы используются для адаптивной веб-разработки и легко настраиваются. Выше приведен лишь пример использования свойства max-width style для определения того, какие стили необходимо применить. Вы можете использовать несколько мультимедийных запросов в одном классе, чтобы охватить то, что необходимо охватить.