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>
Related
I am trying to make the solid background of a HTML5 video blend in with the background of the page.
I've tried using mix-blend-mode though the vide stays same. Is there a way to do this via CSS?
Here is the jsfiddle (the video background should be gray like the container). I try two approaches (blend mode on the main container and blend mode on a separate, special container for the video.
Here is the code:
<div id="container">
<video width="320" height="240" controls>
<source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<div id="container-two">
<div id="inner-container">
<video width="320" height="240" controls>
<source src="https://static.videezy.com/system/resources/previews/000/013/330/original/Thin_Smoke_80_-_4K_res.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
JS
video{
mix-blend-mode:multiply;
}
#container{
background-color:gray;
height:500px;
width: 100%;
mix-blend-mode:multiply;
}
#container-two{
background-color:gray;
height:500px;
width: 100%;
mix-blend-mode:multiply;
}
#inner-container{
background-color:gray;
height:500px;
width: 100%;
mix-blend-mode:multiply;
}
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>
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/
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>