Позиционирование видео HTML мобильный

Question

У меня полноэкранное видео, занимающее всю страницу. Видео отображается с полной шириной и высотой на рабочем столе. Тем не менее, он показывает только часть этого на мобильном телефоне. Это нормально, хотя я хочу изменить ту часть видео, которая показывает, чтобы переместиться влево. Это наглядное пособие, чтобы показать то, что я пытаюсь спросить: https://imgur.com/a/zWIyysu

Это мой код:

<video autoplay muted loop id="myVideo">
  <source src="header7.mp4" type="video/mp4">
</video>



<style>
    #myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}




}
</style> 

Answer 1

Чтобы сделать ваше видео полноэкранным на любом экране, я бы предложил изменить свойства min-width и max-width на width и height и использовать единицы просмотра. Подход может быть:

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
}

<video autoplay muted loop id="myVideo">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>

Обратите внимание, что я сменил ваше видео src на заполнитель для пояснения.

РЕДАКТИРОВАТЬ: Смотрит как переполнение стека не позволяет видео, вот рабочий Fiddle

РЕДАКТИРОВАТЬ 2: Если вы просто хотите переместить видео в слева на мобильном устройстве, просто поиграйте со свойством right, пока оно не окажется там, где вы хотите. Обязательно используйте медиазапросы .