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 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.
All, I have some video playing on my website, and I want it to play width: 100%; height: 600px; but nothing I have tried has worked so far.
When I set the height: 600px; the width of the video is proportionate. I basically want to achieve the same effect as background-size: cover, with a height of 600px. I am using inline CSS, and that part can be changed, but I am more concerned with how to achieve a custom height and width of a video, if even possible. Thank you.
ANY help is highly appreciated. Here is my code for the <video>
<video loop="loop" poster="img/waves1.jpg" style="width: 100%; height: 600px;" autoplay="autoplay">
<source src="video/sunset.webm" type="video/webm">
<source src="video/sunset.mp4" type="video/mp4">
</video>
One way to accomplish this is to wrap the video in a div and give that the height of 600px and overflow: hidden.
For example:
<div style="width: 100%; height: 600px; overflow: hidden;">
<video loop="loop" poster="img/waves1.jpg" style="width: 100%;" autoplay="autoplay">
<source src="video/sunset.webm" type="video/webm">
<source src="video/sunset.mp4" type="video/mp4">
</video>
</div>
Note that the video may be cut off towards the bottom if its proportionate height is greater than 600px and that the more you stretch the window, the more the video will be cut off.
Here is a jsFiddle using this code:
<div style="width: 100%; height:200px; overflow: hidden;">
<video loop="loop" style="width: 100%;" autoplay="autoplay">
<source src="http://opcdn.battle.net/static/hearthstone/videos/home-header-bg.webm" type="video/webm"/>
</video>
</div>
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>