On my site I have a <video> element inside a <div>. I use this <div> to define the video aspect-ratio, and let the user change it if necessary (sometimes the encoded video has an incorrect ratio). The <video> always fills the <div> with the "object-fit: fill;" CSS property.
But... When the user enters to fullscreen mode, the screen becomes the container. And it is a problem, because of all the different display ratios out there.
Is there a way to manipulate/limit the fullscreen size?
<div style="width: 960px; height: 540px; background: #bfbfbf; display: block; margin: 0 auto;">
<video style="object-fit: fill;">
<source src="" />
</video>
</div>
Add "controls" to activate controls for the video
<html>
<head>
<style>
.div
{
background-color: #bfbfbf;
width: 960px;
height: 540px;
display: block;
margin: 0 auto;
background-size: cover;
}
</style>
</head>
<body>
<div class="div">
<video style="object-fit: fill; width: 960px; height: 540px;" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
I am creating a website and it has a fullscreen video background with a navigation bar and I want to scroll down from the video and see text below it. Whenever I add text, the text goes underneath the video and not after it. I want to continue the webpage after someone scrolls so there can be more content underneath (i.e. Paragraphs about the page)
I am also using Twitter Bootstrap 3 so I don't know if that is changing anything.
The jsfiddle
HTML:
<section id="video">
<div class="video-container">
<!-- SAMPLE VIDEOS -->
<video autoplay="true" loop="true" muted="true" class="main-video" poster="http://placehold.it/350x150">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
Hello World!
I would really appreciate it if you could help me with this.
Thank you.
.video-container{
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
Please let me know if this is what you wanted.
You can use a position:relative on the video container and set the video height to 100vh.
.video-container{
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
}
try this below code
<style type="text/css">
.video-container{
flot:left;
width: 100%;
}
.video-container video{width: 100%; height: 100vh;}
.video-container p{width: 100%; line-height:26px; font-size:24px; text-align:center; padding-bottom:50px;}
</style>
<div class="video-container">
<!-- SAMPLE VIDEOS -->
<video autoplay loop muted="true" class="main-video" poster="http://placehold.it/350x150">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<p>this is testing</p>
</div>
I need to cover the html5 background video with black responsive layer with some opacity (let's call it "shadow layer"). Unfortunately, I can't pick a height of the video layer, because it has to be absolutely positioned, so it is not possible to pick the height of parent div.
Any advices? JS is absolutely not welcome.
Here is the code:
html
<div>
<div class="shadow-layout">
<div class="content">
Some content
</div>
</div>
<div id="video-bg">
<video class="video-bg" autoplay loop poster="">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
</div>
css
.shadow-layout {
height: 100%;
width: 100%;
position: absolute;
background: rgba(0,0,0,0.5)
}
.content {
margin-top: 40px;
text-align: center;
color: white;
}
#video-bg, .video-bg {
width: 100%;
}
...and jsfiddle
Try changing your css to this...
.shadow-layout {
height: 100%;
width: 100%;
position: absolute;
background: rgba(0,0,0,0.5)
}
#video-bg, .video-bg {
width: 100%;
height:100%;
position:absolute;
}
And you should close your source tag... Change your html to this...
<div>
<div class="shadow-layout"></div>
<div id="video-bg">
<video class="video-bg" autoplay loop poster="">
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4"/>
</video>
</div>
</div>
Working JSFiddle here http://jsfiddle.net/DivakarDass/k7cqprLz/1/
Hope you asked for a background for that video like this.
Cheers.
I'm running a video in the background of my homepage using the following code:
<video autoplay poster="videos/test.png" id="bgvid" muted>
<source src="videos/test.webm" type="video/webm">
<source src="videos/test.ogv" type="video/ogv">
<source src="videos/test.mp4" type="video/mp4">
</video>
And I have a div on top of it, which I'm trying to make it translucent while blurring the video behind it (same effect as in the following image)
I've searched a lot on how to do it, some people suggested using css filters like: blur(5px). I've tried them but I'm not getting results like in the above picture.
Then I found a really cool library called blur.js (http://blurjs.com/); however, it's not working with the video in background, but only when I have a still image as a background.
Any ideas on how to achieve this effect with a video running in background?
You can use a <canvas> mirroring the content of the background-video, apply some CSS filter on it and finally wrap this canvas in a <div> to show only the portion of the video you need to show in the box...
i did an example here:
http://codepen.io/Tont/pen/HnLdj/
EDIT: there is now an easier method -> https://stackoverflow.com/a/58952257/4105190
Normally i wouldn't default to it, but in the case of wanting that exact effect (blur)--I would say the path of least resistance would be a background image for the div.
If using a css filter (which isn't very compatible) isn't giving you what you want, the background image is likely less wasteful than trying to include extra dependencies in the form of a plugin (blurjs, etc)
Here's a js-fiddle with a somewhat hacky solution. It plays the same video twice, one on top of the other. The fiddle is a bit quirky in loading the videos, so have some patients. For some reason it helps to have Chrome devtools open with caching disabled:
http://jsfiddle.net/wgxqkeb3/5/
<video class="video2" id="video2" preload="auto" loop="loop">
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
<div class="container">
<p>Blurry video box</p>
<div class="video-container">
<div class="bg"></div>
<video class="video1" id="video1" preload="auto" loop="loop">
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
</div>
The hard part is synchronizing playback of the two videos. It could be that the above solution coupled with something like popcorn.js could make what you want to achieve possible. The solution in jsfiddle isn't synchronizing perfectly (it's a bit random to be frank), but I haven't been able to test if popcorn could make a difference there.
Try this
*{box-sizing:border-box;padding:0;margin:0}
main{position:relative;width:100vw;height:100vh}
.container{color:white;padding:20px;text-align:center}
#videoContainer{position:relative;width:100%;height:320px;overflow:hidden}
#videoCaption{height: 100%;
z-index: 1;
width: 100%;
background: rgba(194, 194, 194, 0.9);
position: absolute;
top: 0;
left: 0;}
#bgvid{position:relative;top:0;left:0;max-height:100%;width:100%;z-index:0}
Markup:
<main class="container">
<section id="videoContainer">
<video poster="videos/test.png" id="bgvid" autoplay muted>
<source src="videos/test.webm" type="video/webm">
<source src="videos/test.ogv" type="video/ogv">
<source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
<article id="videoCaption">
<div class="container">
<p>awesome freelancers at the right price</p>
</div>
</article>
</section>
</main>
Try the below -
<div id="vid_container">
<div id="vid_over"></div>
<video autoplay poster="videos/test.png" id="bgvid" muted>
<source src="videos/test.webm" type="video/webm">
<source src="videos/test.ogv" type="video/ogv">
<source src="videos/test.mp4" type="video/mp4">
</video>
</div>
#vid_container {
width:XXpx;
height:XXpx;
float:left;
}
#bgvid{
float:left;
}
#vid_over {
position:absolute;
float:left;
width:XXpx; //width of your video div
min-height:XXpx; //height of your video div
background-color:#000;
opacity:0.4 //adjust opacity here, 1 for opaque
z-index:300000;
}
Its a little tricky, I have tried this in the past but not over a video, but using a similar div (date selectors) over an image
Check CSS fiddle http://jsfiddle.net/4qeykcjk/3/
html code
<div class="col-xs-12">
<div id="mover-form" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="video_bg_addon">
<video id="myVideo" poster="http://easyhtml5video.com/images/happyfit2.jpg" autoplay="true" src="http://easyhtml5video.com/images/happyfit2.mp4" ><source src="http://easyhtml5video.com/images/happyfit2.mp4"><source src="http://easyhtml5video.com/images/happyfit2.webm"><source src="http://easyhtml5video.com/images/happyfit2.ogg"></video>
</div>
<div class="container">
<div class="col-xs-12 col-sm-10 col-md-10 col-lg-10" id="form-area">
<form class="col-xs-12 col-sm-12 col-md-12 col-lg-12" role="form" action="">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<input type="text" class="form-control" id="source-mover" name="source-mover" placeholder="Where are you moving from?">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 form-desc-mover">
<div class="form-group">
<input type="text" class="form-control" id="destination-mover" name="destination-mover" placeholder="Where are you moving to?">
</div>
</div>
<div class="col-xs-12 search-btn-block">
<div class="col-xs-12 col-sm-6 text-center">
<input type="submit" class="btn btn-primary" name="submit" id="request-quote" value="Search">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS code
#mover-form {
z-index: -10;
background-image: url('http://easyhtml5video.com/images/happyfit2.jpg');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
color: #fff;
height: 500px;
padding-top: 0px;
}
#video_bg_addon{
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
-webkit-background-size: cover;
background-image: url(http://easyhtml5video.com/images/happyfit2.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
video{
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 0%;
-webkit-transform: translate(0%, -50%);
transform: translate(0%, -50%);
visibility: visible;
width: 1288px;
height: auto;
}
#mover-form #form-area {
float: none;
margin: 25% auto 0px auto;
}
#form-area form {
padding: 30px 15px;
background-color: rgba(0,0,0,0.5);
}
If you want total control, you would want to use a <canvas> in the overlay.
Then, setup a requestAnimationFrame loop that snapshots the video and renders it on the canvas. This is where you can apply various logic to the canvas, like blurring, reflecting, desaturating, etc.
You would, essentially, be doing the same thing that this HTML5 Rocks tutorial describes, but you'd be doing it a bunch of times every second. That's where the requestAnimationFrame loop becomes valuable.
However, because it is just a blurry background, it might be okay to reduce the frequency of the loop, in order to improve performance.
Since my other answer is now a little obsolete (although still valid) I post here a new and easier method.
The blurred Effect on the background is easily achievable with the backdrop-filter porperty.
for instance:
backdrop-filter: blur(15px);
here a snippet with this property in action:
html, body {
width: 100%;
height: 100%;
margin: 0px;
font-family:arial, helvetica;
font-size:14px;
line-height:1.4em;
color:#fff;
}
video {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: fill;
}
div.wrap{
position: fixed;
display: flex;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 60vh;
width: 60vw;
align-items: center;
background: rgba(0,0,0,.5);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}
p { padding: 2em; }
<video id="video1" autoplay="true" loop poster="http://placehold.it/500x500">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4" type="video/mp4">
<source src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm" type="video/webm">
</video>
<div class="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
borwser support is pretty decent: according to caniuse.com most of modern browser support it. https://caniuse.com/#search=backdrop-fil
give the div a rgba background
.nameOfDiv {
background-color:rgba(0,0,0,0.65);
}
Mess with the percentage that I have set to 65%, to achieve your desired effect.
This may be easy if it can’t even be done. I want to overlay a top banner graphic (png) on top of this video player on my site to give the illusion of the video playing in a screen underneath a red movie-theatre style curtain on top. Here’s my code, so what kind of overlay do I need to use so the graphic will always move with my video?
<div style="position: relative;">
<div id="video-player" style="width: 600px; height: 800; margin: 0; position:relative; ">
<div style="position: absolute; top: 200px; left: 10px;">
<video height="400" width="599" id="container" src="my-video-source"> </video>
</div>
Thanks
just use an absolutely positioned element. You may need to mess around with Z-Indexes too
Try the following. Just watch your math on width's, you were breaking out of the container in your example. Also, if the curtain is 'behind' the video add z-index:9; to the .curtain class. (increment by more if needed) If your video is a youtube iframe embed then you'll need to add the opacity setting on youtube url.
<style>
.video_container{
height:600px;
padding:200px 0 0 10px;
position:relative;
width:590px;
}
.curtain{
position:absolute;
top:0;
left:0;
}
</style>
<div class="video_container">
<video width="590" height="400" controls="controls">
<source src="my-video-source" type="video/mp4" />
</video>
<img class="curtain" src="/curtain.png">
</div>