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>
CSS-tag object-fit:cover does not clip/crop videos in Chrome as expected.
This happens only for videos and only in Chrome.
Images are OK in Chrome.
In all other tested browsers, images and videos are both working fine.
The behavior should be as shown in this image (top right):
I have created a demo that shows the wrong behavior.
You see the effect when you change the browser window size. With large height and small width (as well as with small height and large width) the videos start to overlap which is wrong. The images don't overlap and are therefore correct.
Videos (with the bear) should be divided at 50% screen width as the images (screen test pictures):
The code for the demo -
HTML
<div class="main">
<div class="container" style="top:0; left:0">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:0%; left:50%">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:25%; left:0;">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:25%; left:50%">
<video autoplay loop>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="top:50%; left:0">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:50%; left:50%">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:75%; left:0">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
<div class="container" style="top:75%; left:50%">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>
</div>
CSS
html, body{
margin:0;
padding:0;
height:100%;
width:100%;
overflow:hidden;
}
.main{
position:relative;
width: 100%;
height: 100%;
}
.container{
position:absolute;
width:50%;
height:25%;
}
img, video{
position: relative;
object-fit:cover; /* This is the mainly problematic line*/
overflow:hidden;
width:100%;
height:100%;
}
How can this be solved?
Apply -webkit-border-radius: 1px; to a video as a workaround against Chrome's bug https://bugs.chromium.org/p/chromium/issues/detail?id=400829#c31
I had the same problem and solved it by adding overflow:hidden; to my container div. Try adding it to your container class and it should work fine.
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>