I want to make background video for the website. Whatever I am doing there is a gap in the top and left sides. I changed the width left position anyway the error still is same. Please find the print screen from the website. I also attached my CSS and HTML code. Thank you for reading.
CSS:
header-container {
width: 90%;
height: 900px;
border-left: 1%;
border-right: none;
position: relative;
padding: 20px;
}
.video-container {
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
width: 100%;
}
HTML:
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay = "autoplay" loop = "loop" muted>
<source src="video/test.mp4" type="video/mp4" >
</video>
</div>
</div>
https://ibb.co/incNY5
You have padding in heading-container. Set it 0px.
Related
i want to create a video container that covers the whole screen
and the video inside the container covers the whole container and doesn't overflow means container adapts the whole screen size.
and is responsive accordingly.
currently the video is taking its full height..i don't want that
i want its height to be limited to the screen size and there is no scroll.
my html code is
<div class="video-container">
<div class="video-wrapper">
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
my css code is :
.video-container {
display: block;
max-width: 100%;
min-width: 200px;
}
.video-wrapper {
background: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
z-index: 0;
}
.video-container video {
border-radius: inherit;
height: auto;
vertical-align: middle;
width: 100%;
}
video {
max-width: 100%;
object-fit: contain;
}
please help me with this problem..thanks in advance.
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
video {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
HTML:
<body>
<script src="./index.js"></script>
<video autoplay controls>
<source src="../../assets/movies/joker.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
A meta tag like this helps:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You need to change your width and height, CSS features the possibility for view height and view width, so it fits the screen. As already mentioned above:
.video-wrapper{
height: 100vh;
width: 100vh;
}
I'm trying to place a small video behind a banner-like div element. After some time researching I managed to at least show the contents of the div, but the video is nowhere to be seen. If I place them separately both show up, but if I try to stack them on top of each other it disappears.
HTML:
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src=/assets/img/cs.mp4" type="video/mp4">
</video>
</div>
<div id="cs-table">
//content
</div>
</div>
CSS:
#castle-siege {
width: 1000px;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 5;
}
#cs-table {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 10;
}
I think in this instance, that you need to set position attribute as well as z index in order to display the video properly. Also ensure your video is present and correct at the set url of course! Set the position of the video to absolute and set the table relative to it, either with a higher or lower z-index, as necessary (higher if you want it to be seen on top of the video)
For purposes of demo, I set the width to 80%, it's prob better to use percentages/ an adjustable unit, rather than setting the width in px.
Hope this helps
#castle-siege {
width: 80%;
height: 150px;
text-align: center;
position: relative;
overflow: hidden;
}
#cs-video {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index:0;
}
#cs-table {
width: 100%;
height: 100%;
margin-top: 30px;
margin-left: 50px;
color:red;
text-align:left;
position: relative;
z-index:1;
}
<div id="castle-siege">
<div id="cs-video">
<video id="videocs" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="http://mirrors.standaloneinstaller.com/video-sample/jellyfish-25-mbps-hd-hevc.mp4">
</video>
</div>
<div id="cs-table">
Hi there, how's it going? There's supposed to be a table here.
</div>
</div>
I have a video background and I had issues putting text/elements over it, so I created an overlay. This helped me in the short term, but now I can't get an image element to "stick" to the right. I want it to stick to the right regardless of device width.
I have tried to do float: right; This might be an issue with a parent container, but I tried dragging #logo-image outside of the .videoContainer but it wasn't overlayed on top of the video anymore.
I have tried position: absolute; & tweaking the positioning of top and left -- however that doesn't help me keep it stuck on the right.
HTML
<div class="row">
<div class="twelve columns">
<div class="videocontainer">
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%" id="homeVideo">
<source src="photo/water.mp4" type="video/mp4">
</video>
<h1>
<img id="logo-image" src="photo/logo.png" align="right" alt="logo">
</h1>
<div data-sr class="overlay">
<h2 id="mantra"> ‾‾‾‾‾‾‾‾ <br><br>
This is the mantra<br>
</h2>
</div>
</div>
</div>
</div>
</section>
CSS
.videocontainer {
position:relative;
}
.videocontainer video {
position:relative;
z-index:0;
}
#homeVideo {
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#media only screen and (min-width: 1200px) {
.overlay {
width:100%;
height: 100%;
position: absolute;
z-index:1;
}
#logo-image {
float: right;
overflow: hidden;
width: 700px;
height: 200px;
margin: 5px 5px 5px 5px;
}
#mantra {
margin-left:90%;
font-size:2vw;
width: 50%;
padding-top: 0px;
}
}
I expect to see the #logo-image element floated to the right. If I drag the width of the screen, I want it to still be stuck to the right.
I'm more backend guy than frontend, so if you consider my question as dummy, sorry for that, but I couldn't find answer :)
My aim is to have background video with parallax using CSS. In general I did manage to do that, but result is not good enough. Because of some reason, video which is in background is under all sections, instead of being in just one section where it supposed to be...
HTML:
<div class="fullScreenPhoto"></div>
<div class="video-container">
<video autoplay poster="" class="video-parallax" loop muted>
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
</video>
</div>
<div class="fullScreenPhoto2"></div>
<div class="fullScreenPhoto3"></div>
CSS:
body{
margin: 0;
padding:0
}
.fullScreenPhoto{
width: 100%;
margin:0;
height:300px;
background-color: red;
}
.fullScreenPhoto2{
width: 100%;
height:300px;
margin:0;
background-color: green;
}
.fullScreenPhoto3{
width: 100%;
margin:0;
height:300px;
background-color: yellow;
}
video {
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
.video-container {
height: 600px;
}
.video-parallax {
-webkit-transition-position: fixed;
position: fixed;
}
Here you can fiddle:
Fiddle
where I've duplicated my issue. If you will hide one section, or change z-index for higher, you are able to see, that video is all over the page...
BTW. I know about plugin jQuery -> https://github.com/linnett/backgroundVideo, but I would like to use just CSS.
You can easily do this as you do with image parallax.
The HTML:
<div class="ParallaxVideo">
<video autoplay muted loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<h1>Video Background</h1>
</div>
The CSS
.ParallaxVideo{
height: 300px;
padding-bottom: 50px;
padding-top: 50px;
}
.ParallaxVideo video{
min-width: 100%;
position: fixed;
top:0;
z-index: -999;
}
.ParallaxVideo h1 {
color: #fff;
font-size: 76px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
You can also take a look this tutorial for more details:
https://codeconvey.com/video-parallax-background-using-css3/
Here is demo version:
http://codeconvey.com/Tutorials/VideoParallaxBackground/
If you want video to be background only for this one div then you couldn't have parallax effect, because then you need remove position: fixed for .video-parallax (so all styles for this class as I see) and change styles for video to that:
video {
margin:0 auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
transition: 1s opacity;
}
You need to set a css height for the video element, or on the element itself like <video height="400">. Updated Fiddle.
For this purpose I am using Materialize CSS. It is straightforward. We want a video as background parallax CSS.
HTML WITH MATERIALIZE CSS
<style>
#anyvideo{
position: absolute;
right: 0;
bottom: 0;
min-width: 10%;
min-height: 100%;
}
</style>
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
We can also make our video responsive i.e. adjust to screen size accordingly.
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo" class="responsive-video">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
In the above code only the class="responsive-video" has been added and that makes the video responsive.
I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.
It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.
I need the video to replace the colored boxes:
The colored boxes are atm just, CSS boxes.
Pure CSS method
It is possible to center a video inside an element just like a cover sized background-image without JS using the object-fit attribute or CSS Transforms.
2021 answer: object-fit
As pointed in the comments, it is possible to achieve the same result without CSS transform, but using object-fit, which I think it's an even better option for the same result:
.video-container {
height: 300px;
width: 300px;
position: relative;
}
.video-container video {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
z-index: 0;
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Previous answer: CSS Transform
You can set a video as a background to any HTML element easily thanks to transform CSS property.
Note that you can use the transform technique to center vertically and horizontally any HTML element.
.video-container {
height: 300px;
width: 300px;
overflow: hidden;
position: relative;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
z-index: 1;
position: relative;
text-align: center;
color: #dc0000;
padding: 10px;
}
<div class="video-container">
<video autoplay muted loop>
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
<div class="caption">
<h2>Your caption here</h2>
</div>
</div>
Why not fix a <video> and use z-index:-1 to put it behind all other elements?
html, body { width:100%; height:100%; margin:0; padding:0; }
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="video" style="width:100%; height:100%">
....
</video>
</div>
<div class='content'>
....
Demo
If you want it within a container you have to add a container element and a little more CSS
/* HTML */
<div class='vidContain'>
<div class='vid'>
<video> ... </video>
</div>
<div class='content'> ... The rest of your content ... </div>
</div>
/* CSS */
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
Demo
I believe this is what you're looking for. It automatically scaled the video to fit the container.
DEMO: http://jsfiddle.net/t8qhgxuy/
Video need to have height and width always set to 100% of the parent.
HTML:
<div class="one"> CONTENT OVER VIDEO
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>
<div class="two">
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>
CSS:
body {
overflow: scroll;
padding: 60px 20px;
}
.one {
width: 90%;
height: 30vw;
overflow: hidden;
border: 15px solid red;
margin-bottom: 40px;
position: relative;
}
.two{
width: 30%;
height: 300px;
overflow: hidden;
border: 15px solid blue;
position: relative;
}
.video-background { /* class name used in javascript too */
width: 100%; /* width needs to be set to 100% */
height: 100%; /* height needs to be set to 100% */
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
JS:
function scaleToFill() {
$('video.video-background').each(function(index, videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height(),
val;
if (videoRatio < tagRatio) {
val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
} else if (tagRatio < videoRatio) {
val = videoRatio / tagRatio * 1.02;
}
$video.css('transform','scale(' + val + ',' + val + ')');
});
}
$(function () {
scaleToFill();
$('.video-background').on('loadeddata', scaleToFill);
$(window).resize(function() {
scaleToFill();
});
});