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?
Related
I am working on a website hobbinternational.com, and I need the video in the home page to cover the whole screen and the header to be transparent. I tried a lot but couldnt find a solution. Can anyone help?
Add position: fixed; into .page-header
For others, here is an example of a video in the background
.bg-video-wrap {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
}
video {
min-width: 100%;
min-height: 100vh;
z-index: 1;
}
.overlay {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
background-size: 3px 3px;
z-index: 2;
}
h1 {
text-align: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 3;
max-width: 400px;
width: 100%;
height: 50px;
}
<div class="bg-video-wrap">
<video src="https://designsupply-web.com/samplecontent/vender/codepen/20181014.mp4" loop muted autoplay>
</video>
<div class="overlay">
</div>
<h1>Fullscreen video background
</h1>
</div>
https://codepen.io/designsupply/pen/zmEWBm
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>
I would like a full size, background youtube video. I used the following example for html5 video, and it worked.
I would like same, resizable background video, but unfortunately black bar appears on both side.
The solution is for html5 videos are the following snippet:
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: aboslute;
What's the problem with it with youtube videos? What is the best way to get same result?
body {
margin: 0;
padding: 0;
background: #333;
background-attachment: fixed;
background-size: cover;
}
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
article {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
margin: 10px;
}
h1 {
position: absolute;
top: 60%;
width: 100%;
font-size: 36px;
letter-spacing: 3px;
color: #fff;
font-family: Oswald, sans-serif;
text-align: center;
}
<article>
<h1>GROSS DESIGN co.</h1>
</article>
<video autoplay loop id="video-background" muted>
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
You could try another approach with Jquery; It would allow you to have your youtube videos auto-resize based on the browser viewport. Put your content in the DIV and use it as a container.
Original Tutorial
I have a background HTML5 video on my website :
<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="images/poster.png">
<source src="videos/video-1.webm" type="video/webm">
<source src="videos/video-1.mp4" type="video/mp4">
<source src="videos/video-1.ogg" type="video/ogg">
<p>Your browser does not support the video element. Try this page in a modern browser!</p>
</video>
CSS :
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
But the poster image doesn't work properly on mobile and tablet devices, it doesn't scale to fit the whole window resolution !!
My question is how I can make the poster image fit the window on any mobile / tablet device.
Screenshot : http://imgur.com/hZuKHAx
Website CSS layout : http://jossefbn.com/css/layout.css
Please help I'm stuck !!
You can fit video by width and height or stretch it(in mobile situation by media query).
Stretch
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
//stretch
-webkit-transform: scale(1,1);
-moz-transform: scale(1,1);
-ms-transform: scale(1,1);
-o-transform: scale(1,1);
transform: scale(1,1);
}
width and height:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
width: 100%;
height: 100%;
}
I am trying to get a video to scale with the browser window, and still cover the whole area, but cannot achieve this. Any one know why my current method isn't working?
HTML:
<div class="bgVideoWrap">
<video id="bgVideo" loop="true" autoplay="true" >
<source src="video/bgVideos/Speak_BG.webm" type="video/webm"></source>
</video>
</div>
CSS:
#bgVideo {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
.bgVideoWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ff0000;
z-index: -1000;
overflow: hidden;
}
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1;
}
-DEMO-
Set background-size: cover; to .bgVideoWrapand opacity: 0.6; to #bgVideo
MARKUP:
<div class=bgVideoWrap>
<video id=bgVideo loop autoplay poster=http://media.w3.org/2010/05/bunny/poster.png>
<source src=http://media.w3.org/2010/05/bunny/movie.mp4 type=video/mp4>
<source src=http://media.w3.org/2010/05/sintel/trailer.ogv type=video/ogg>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>
STYLE:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
line-height: 1;
}
#bgVideo {
height: auto;
width: auto;
opacity: 0.6; /*Set opacity*/
min-width: 100%;
min-height: 100%;
}
.bgVideoWrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1000;
overflow: hidden;
background: #333 url("http://aimg.disneystore.com/content/ds/skyway/2012/category/full/cp_FWB_Brave_20120926.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}