I have a video with the following properties, Frame width: 1920 and Frame Height: 1080. I need its width and height to be 100% thus filling up the whole screen. And it needs to be responsive too. So far, I have this code :
<video class="hidden-xs hidden-sm hidden-md hidden-custom videosize embed-responsive-item" autoplay="autoplay" loop="loop">
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
css:
.videosize {
position:absolute;
z-index:-1;
top:0;
left:0;
width:100%;
height:100vh;
}
With the code above it fits perfectly with a 1680 x 1050 screen resolution, however with other resolution, it takes up 100% of the height then the width adjusts leaving white spaces on both sides.
Any idea ? Thanks.
Found a good solution here: http://codepen.io/shshaw/pen/OVGWLG
So your CSS would be:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
HTML:
<div class="video-container">
<video>
<source src="~/Videos/myvideo.mp4" type="video/mp4" />
</video>
</div>
You can now use the object-fit property. This property has been designed especially to manage responsive size for <img> and <video> elements. It is now supported by all modern browsers.
.videosize {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This worked for me.
I Set the height of the video Tag and it solved the problem:
<video height="600" autoplay="true" loop="true" muted="true" plays-inline="" style="position: absolute; right: 0; top: 0; min-width:100%; z-index: -100; object-fit: cover;">
<source src="assets/vid/grapes.mp4" type="video/mp4"> </video>
This worked amazingly: https://css-tricks.com/fluid-width-video/
video {
/* override other styles to make responsive */
width: 100% !important;
height: auto !important;
}
Can you use an iframe?
/* Flexible iFrame */
.flexible-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.flexible-container iframe,
.flexible-container object,
.flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!-- Responsive iFrame -->
<div class="flexible-container">
<iframe src="URL" frameborder="0" style="border:0"></iframe>
</div>
Using object-fit: cover; was my solution.
As of 2021 it is supported by all major browsers.
object-fit support
CSS Example:
.video-wrapper {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.video-wrapper video {
object-fit: cover;
}
I know it's an old post but I guess this can help?
*{
margin: 0 !important;
}
html{
height: 100vh;
}
body{
height: 100%;
overflow: hidden;
}
.wrapper{
width: 100%;
height: 100%;
}
.wrapper video{
height: 100%;
width: 100%;
background-color: red; /* I added bg color here so you can see how the video cover the page */
}
<div class="wrapper">
<video>
<source src="video.mp4" type="video/mp4">
</video>
</div>
my question is related to this this question
<div id="tv_container">
<video width="300" height="240" controls>
<source src="Spin1038.mov" type="video/mov">
Your browser does not support the video tag.
</video>
</div>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 10;
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
I am doing the same thing. The its not working and even if I remove the image, the video isn't working even then as well.
This is my page.
Change #tv_container:after { z-index: -10 }
Also changed the <video width='245'....>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#tv_container {
width: 360px;
height: 800px;
position: relative;
}
#tv_container:after {
content: '';
display: block;
background: url('http://mediacentral.ie/snapchat/wp-content/uploads/2016/02/Cell.jpg') no-repeat top left transparent;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: -10; /* This should be lowest z-index value */
}
#tv_container video {
position: absolute;
top: 30px;
left: 40px;
z-index: 5;
}
</style>
</head>
<body>
<div id="tv_container">
<video width="245" height="240" controls>
<source src="https://glpjt.s3.amazonaws.com/so/av/vs12s3.mp4" type="video/mp4"></video>
</div>
</body>
</html>
I have attempted the answers found here but still cannot fathom how to overlay a images and text over html5 video. Whatever I try the elements simply stack above or below one another. The code is as follows:
HTML:
<html>
<body>
<div id="wrap_video">
<div id="video_box">
<div id="video_overlays">
<img src="img/overlay.png"</img>
<a> TEXT </a>
</div>
<div>
<video id="player" src="mov/movie.mp4" type="video/mp4" autoplay="autoplay" loop>">Your browser does not support this streaming content.</video>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
margin: 0px;
}
#video_box {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
}
#video_overlays {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 100;
}
video#player {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 99;
}
#wrap_video {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
}
<div id="wrap_video">
<video id="player" width="960px" height="720px" loop="loop">
<source src="mov/movie.mp4" type="video/mp4"/>
<source src="movie.ogg" type="video/ogg" />
Your browser does not support this streaming content.
</video>
<div id="video_overlays">
<img src="http://images.apple.com/v/ios/carplay/a/images/carplay_icon.png"/>
TEXT
</div>
</div>
css
html, body {
margin: 0px;
}
#wrap_video {
position: absolute;
top: 0;
left: 0;
}
#video_overlays {
position: absolute;
top: 0;
left: 0;
width: 960px;
height: 720px;
z-index: 100;
background-color: rgba(255,255,255,.4);
}
#player{
background: purple;
}
I'm trying to use an html5 video as a background for a single full page site however in chrome the video initially loads on top of all of the content until the user attempts to scroll.
The styles for the CSS are below
video#bgvid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
background: url(../images/video-fallback.jpg) no-repeat;
background-size: cover;
}
Sample on how content is laid out on the site (the bg is set with a transparent color so the interior content is placed outside of it)
.header-bg {
width: 100%;
height: 150px;
background-color: #000;
z-index: 5;
position: absolute;
top: 0;
left: 0;
opacity: .7;
-webkit-opacity: .7;
-moz-opacity: .7;
}
header {
position: relative;
z-index: 10;
width: 100%;
height: 150px;
text-align: center;
}
HTML
<video autoplay loop poster="images/video-fallback.jpg" id="bgvid">
<source src="teaser.mp4" type="video/mp4">
<source src="teaser.ogv" type="video/ogg">
</video>
<div class="header-bg"></div>
<header>
<img src="images/logo.png">
</header>
Any idea on why the video is loading on top of the content in chrome?
i'm trying to code a television-like-youtube-video. But it seems bad in other resolutions.
Here's my fiddle: http://jsfiddle.net/QRkL9/3/
And here's my code:
HTML
<div id="wrap-video">
<img src="http://www.spotcularcarsisi.org/wp-content/uploads/2013/06/lg-tv.jpg" />
<div id="video">
<iframe src="//www.youtube.com/embed/W8vlVksDTe8" frameborder="0"></iframe>
</div>
</div>
And here's my CSS:
#wrap-video {
position: relative;
padding-bottom: 56.25%; /* 4:3 */
padding-top: 25px;
height: 0;
}
#wrap-video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#video {
position: relative;
padding-bottom: 56.60%; /* 4:3 */
padding-top: 0;
height: 0;
}
#video iframe {
position: absolute;
top: 0;
left: 5%;
width: 90%;
height: 77%;
}
Thanks for any solution or help.