Центрировать видео по вертикали в мобильном телефоне

Это мой код. Я пытаюсь автоматически воспроизводить видео на устройствах с большей шириной и иметь пользовательскую кнопку воспроизведения на устройствах с меньшей шириной, которая не поддерживает автоматическое воспроизведение видео со звуком. Он хорошо работает на устройствах с большой шириной, но на мобильных устройствах он прилипает к верхней части экрана. Я хочу центрировать его на экране. Я пробовал разные методы, но ни один не помог. Пожалуйста помоги Так это выглядит на мобильном телефоне

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<center>
<div class = "wrapper">
<video id = "hey" class = "video" autoplay playsinline>
<source src = "http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type = "video/mp4" />
</video>
</div>
<div class = "playpause"></div>
</div><center>
<style>
@media only screen and (max-width: 1000px){
.video {
    width: 100%;
    border: 1px solid black;
}
.wrapper{
   
    display:table;
    width:auto;
    position:relative;
    width:100%;
}
.playpause {
    background-image:url("play.png");
    background-repeat:no-repeat;
    width:50%;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}}
@media only screen and (min-width: 1021px) and (max-width : 1600px){
.video {
object-fit: cover;   
width: 100%;
    border: 1px solid black;
}}

</style>
<script>
document.getElementById('hey').addEventListener('ended',function(){
         window.location.href = 'http://www.your-url.com';
 },false);
$('.video').parent().click(function () {
  if ($(this).children(".video").get(0).paused){        $(this).children(".video").get(0).play();   $(this).children(".playpause").fadeOut();
    }else{       $(this).children(".video").get(0).pause();
  $(this).children(".playpause").fadeIn();
    }
});</script>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
520
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если это единственный элемент на вашей странице, сделайте следующее:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

В основном контента недостаточно, чтобы покрыть всю высоту экрана, а элемент body занимает только размер видео. Таким образом, вы должны явно сделать так, чтобы body занимал всю высоту экрана, а затем центрировал содержимое внутри него.

Другие вопросы по теме