The dimensions of my video are 1280 × 720.
I was wondering if it is possible to stretch the video so that it will fit into the size of my browser or other browsers depending on an aspect ratio.
I am using the video tag to place a video on the background of my page. I currently have the video playing in the background but I do not know how to size it appropriately.
I would provide a jsfiddle but I'm not sure how to upload my local video to test recreate this situation
I hope this is what you are looking for...
CSS
#video-bg {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
}
#video-bg > video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 1. No object-fit support: */
@media (min-aspect-ratio: 16/9) {
#video-bg > video { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
#video-bg > video { width: 300%; left: -100%; }
}
/* 2. If supporting object-fit, overriding (1): */
@supports (object-fit: cover) {
#video-bg > video {
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
}
}
HTML
<div id="video-bg">
<video controls loop>
<source type="video/mp4" src="video.mp4">
<source type="video/webm" src="video.webm">
</video>
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.