Почему при просмотре на телефоне видео уезжает?

<div class="fullscreen-bg">
		    <div class="overlay">
		        <h1>Фото на холсте <br>- идеальное решение для вас!</h1>
		    </div>
		    <video loop muted autoplay poster="video/plane.jpg" class="fullscreen-bg__video">
		        <source src="video.mp4" type="video/mp4">
		        <source src="video.webm" type="video/webm">
		    </video>
		</div>

<style>
			.fullscreen-bg {
				margin-top: 50px;
			    overflow: hidden;
			    z-index: -100;
			    position: relative;
			    height: 100%;
    			width: 100%;
    			padding-top:30%;
			}
 
			.fullscreen-bg__video {
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			}
			 
			.overlay {
			    background: rgba(0,0,0,0.6);
			    position: absolute;
			    top:0;
			    left:0;
			    width: 100%;
			    height: 100%;
			    z-index: 4;
			}
 
			.overlay h1 {
			    text-align:center;
			    color:#fff;
			    margin-top: 12%;
			}

@media (max-width: 767px) {
   /*
    .fullscreen-bg {
        background: url('assets/images/fon.jpg') center center / cover no-repeat;
    }
 
    .fullscreen-bg__video {
        display: none;
    }
    */
    .fullscreen-bg {
				margin-top: 50px;
			    overflow: hidden;
			    z-index: -100;
			    position: relative;
			    height: 100%;
    			width: 100%;
    			padding-top:45%;
			}
}
@media (max-width: 620px) {
.overlay h1 {
			    text-align:center;
			    color:#fff;
			    font-size: 22px;
			    margin-top: 20%;
			}
}

</style>