Это мой код. Я пытаюсь автоматически воспроизводить видео на устройствах с большей шириной и иметь пользовательскую кнопку воспроизведения на устройствах с меньшей шириной, которая не поддерживает автоматическое воспроизведение видео со звуком. Он хорошо работает на устройствах с большой шириной, но на мобильных устройствах он прилипает к верхней части экрана. Я хочу центрировать его на экране. Я пробовал разные методы, но ни один не помог. Пожалуйста помоги Так это выглядит на мобильном телефоне
<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>
Если это единственный элемент на вашей странице, сделайте следующее:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
В основном контента недостаточно, чтобы покрыть всю высоту экрана, а элемент body
занимает только размер видео. Таким образом, вы должны явно сделать так, чтобы body
занимал всю высоту экрана, а затем центрировал содержимое внутри него.