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>
Related
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.
im trying to make html5 Background Video in my website . but i have some problem with the IE and Google Chrome .. i have made Live example HERE
Can any one please tell me what is wrong with my video i found it black screen in Google Chrome and not working in IE
CSS:
<section class="container-1140" id="mast" style="height: 775px;">
<div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">
<div id="mast_inner-2">
<video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">
<source src="video/video.mp4"></source>
<source src="video/video.webmhd.webm"></source>
<img src="video/poster.jpg">
</video>
</div>
</div>
</section>
The HTML is :
<section class="container-1140" id="mast" style="height: 775px;">
<div style="overflow:hidden; background:url(http://riskeverything.us/wp-content/themes/risky/images/splash-home.jpg) no-repeat; background-size:cover;" id="mast_inner-1">
<div id="mast_inner-2">
<video loop="1" autoplay="1" id="mast_inner-2" class="_534g" style="display: block;" controls="true">
<source src="video/video.mp4"></source>
<source src="video/video.webmhd.webm"></source>
<img src="video/poster.jpg">
</video>
</div>
</div>
</section>
you can use this plugin. it is simple and it can solve your task .
You could use CSS only, which will work for most browsers
#video_background {
position: fixed;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 100;
overflow: hidden;
}
z index should be -100 to make it a background video in chrome
You need to embed ID of your video which you want to set in your background . Try this
http://jsfiddle.net/bfvopg6p/
I'm just messing around with some HTML5, and I was trying to center a video on the page. For some reason I can't get it to center. I've tried to add a class to the video tag itself, and I've wrapped the video in a separate div. However, the video stays on the left.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/css">
.center {
margin: 0 auto;
}
</script>
</head>
<body>
<div class="center">
<video controls="controls">
<source src="/media/MVI_2563.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
I know this must be something I'm overlooking in the wee hours of the morning, but any help would be appreciated.
Thanks
HTML CODE:
<div>
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>
CSS CODE:
.center {
margin-left: auto;
margin-right: auto;
display: block
}
The center class must have a width in order to make auto margin work:
.center { margin: 0 auto; width: 400px; }
Then I would apply the center class to the video itself, not a container:
<video class='center' …>…</video>
I was having the same problem, until I realized that <video> elements are inline elements, not block elements. You need only set the container element to have text-align: center; in order to center the video horizontally on the page.
Do this:
<video style="display:block; margin: 0 auto;" controls>....</video>
Works perfect! :D
I will not prefer to center just using video tag as #user142019 says. I will prefer doing it like this:
.videoDiv
{
width: 70%; /*or whatever % you prefer*/
margin: 0 auto;
display: block;
}
<div class="videoDiv">
<video width="100%" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
This will make your video responsive at the same time the panel for controls will have the same size as the video rectangle (I tried what #user142019 says and the video was centered, but it looked ugly in Google Chrome).
I was having the same problem. This worked for me:
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
Try this:
video {
display:block;
margin:0 auto;
}
#snowBlind In the first example you gave, your style rules should go in a <style> tag, not a <script> tag:
<style type="text/css">
.center {
margin: 0 auto;
}
</style>
Also, I tried the changes that were mentioned in this answer (see results at http://jsfiddle.net/8cXqQ/7/), but they still don't appear to work.
You can surround the video with a div and apply width and auto margins to the div to center the video (along with specifying width attribute for video, see results at http://jsfiddle.net/8cXqQ/9/).
But that doesn't seem like the simplest solution...shouldn't we be able to center a video without having to wrap it in a container div?
I had a similar problem in revamping a web site in Dreamweaver. The site structure is based on a complex set of tables, and this video was in one of the main layout cells. I created a nested table just for the video and then added an align=center attribute to the new table:
<table align=center><tr><td>
<video width=420 height=236 controls="controls" autoplay="autoplay">
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/video.webm" type='video/webm' >
<source src="video/video.mp4" type='video/mp4'>
<p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
</video>
</td></tr></table>
All you have to do is set you video tag to display:block; FTW the default is inline-block FTL.
Try this
.center {
margin: 0 auto;
width: (whatever you want);
display: block;
}
If you have a width in percent, you can do this :
video {
width: 50% !important;
height: auto !important;
margin: 0 auto;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_eclipse_of_the_moon.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
Use margins <video> is an inline element so you'll have to add display block;to your css class.
You can use specific with, but I wouldn’t use px values. Use % to make it responsive, like:
width: 50%;
That’ll make the video half of the viewport width.
See the original documentation here O World Wide Web Consortium W3C
mystyle.css
video {
width: 50% !important;
height: auto !important;
margin: 0 auto;
display: block;
}
h1 {
text-align: center;
color: #C42021;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>
How do you center a video
</h1>
<div class="center">
<video controls="controls">
<source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>
See the code ready here for more understanding.
You can view the code online Fiddle
<center>
<video controls width="100%" height="480">
<source src="video.mp4" type=video/mp4>
</video>
</center>
Encapsulate your <video> within <center></center> tags, <figure></figure> also works.
.center { width:500px; margin-right:auto; margin-left:auto; }
I found this page while trying to center align a pair of videos. So, if I enclose both videos in a center div (which I've called central), the margin trick works, but the width is important (2 videos at 400 + padding etc)
<div class=central>
<video id="vid1" width="400" controls>
<source src="Carnival01.mp4" type="video/mp4">
</video>
<video id="vid2" width="400" controls>
<source src="Carnival02.mp4" type="video/mp4">
</video>
</div>
<style>
div.central {
margin: 0 auto;
width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>
Worked for me!
<html>
<body>
<h1 align="center">
<video width="1000" controls>
<source src="video.mp4" type="video/mp4">
</video>
</h1>
</body>
</html>
If you use bootstrap, you can use d-block and m-auto classes.
<video class="d-block m-auto" width="1100px" control>
<source src="...." type="video/mp4" />
</video>