FullScreen Video Bootstrap Resizing Issue - css

Question

I am having an issue with the resizing of a full screen video, within a bootstrap template.
Here is the live example? http://velnikolic.com/toad/index.php# below 1400px and in safari browsers the video ratio gets very distorted.
<div class="fullscreen-bg">
<video loop muted autoplay poster="thumbnail.png" class="fullscreen-bg__video">
<source src="video.mp4" type="video/mp4">
</video>
</div>
/*Video*/
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 600px;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}

Answer 1

I think you should consider few Website optimization techniques. compress your thumbnails and other media content in order to load faster. it took me more than a minute for me to load your website.
One more thing i noticed, that is while resizing my browser window, when i switched to mobile view. the video block dissappears. which you can correct by using changing the following code
In your style.css line 450 -
#media (max-width: 767px)
.fullscreen-bg__video {
display: inline-block;
vertical-align:baseline;
}
/*your this css settings are fine*/
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
And I think you just updated the website and the video quality has degraded and when re-sized video is being paused. your last configuration was fine just u had kept width:600% somewhere in css.