I have my video playing in the background but how do I add images over the video? I kind of want it like this image over videoMy video
body, html {
margin: 0;
padding:0;
}
video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
<div class="container" >
<video poster="Sample.jpg" autoplay="true" loop id="video">
<source src="Burning.mp4" type="video/mp4">
<source src="Burning.webm" type="video/webm">
</video>
You can always build HTML structure for the images as shown in the images and use the video as background of it using some video player plugin like (http://vodkabears.github.io/vide/).
body, html {
margin: 0;
padding:0;}
.container{ width: 70%; background: #000; margin: auto; }
.vid{float: left; width: 100%; }
video{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
<div class="container" >
<video poster="Sample.jpg" autoplay="true" loop id="video">
<source src="1.mp4" type="video/mp4">
<source src="1.webm" type="video/webm">
</video>
<img src="http://via.placeholder.com/350x150">
</div>
container centered and image placed on top of the video
Related
Is there any way to make a video in <video> tag mobile responsive ?
<video autoplay muted loop id="myVideo">
<source src="rick.mp4" type="video/mp4">
</video>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
</style>
Please check, I have did Video responsive in following ways.
1st Option You can use media Queries
<video autoplay muted loop id="myVideo">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
max-height: 100%;
}
#media(max-width: 640px){
#myVideo {
width: 100%;
}
}
</style>
2nd Option set width: 100% instead of min-width: 100%
<video autoplay muted loop id="myVideo">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
max-height: 100%;
}
</style>
3rd Option Add wrapper for video tag and handle the responsive
<div class="video-Wrapper">
<video autoplay muted loop id="myVideo">
<source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" type="video/mp4">
</video>
</div>
<style>
.video-Wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
}
#myVideo {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
max-height: 100%;
}
</style>
The most easiest way is to give your video width as a percentage. This means the width of the video will be the % of the container it is in.
Please check the code below. (I have used a division instead of a video)
<div>12345</div>
<style>
div{
width:80%;
height:300px;
background:#dadada;
}
</style>
If you want dfferent css properties at different width o the body then you should use the #media query. Check this for more on #media queries. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Set a maximum size to the video size ratio
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
max-width: 1024px;
max-height: 576px;
}
.videoWrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 1024px;
max-height: 576px;
}
And HTML code
<div class="videoWrapper">
<video class="aspect-ratio-box" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Here the result : https://prnt.sc/s6y3no
The width size is correctly limited to 1024px. The problem is that the height is not limited. It does not allow to put the paragraph below the video.
Why is he ignoring my css rules? How can I overcome this problem
Thanks for helping
I found the solution.
.video {
object-fit: cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.video-frame {
position: relative;
padding-bottom: 56.25%;
display: block;
overflow: hidden;
}
.video-container {
max-width: 1024px;
}
And HTML
<div class="video-container">
<div class="video-frame">
<video class="video" autoplay>
<source src="../../../assets/original.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
I am trying to attach a video as a background to an article section. The issue is that in small screens it is displayed only in the 1/3 of the article. To implement that I used the article class, a background div as a wrapper and the video element id. Any ideas?
<article class=”myArticle”>
<div class="fullscreen-bag">
<video id="videoBack">
<source src=" " type="video/mp4">
<source src=" " type="video/ogg">
<source src=" " type="video/webm">
</video>
</div>
<div class="container">
//
//
</div>
</article>
//Css
.myArticle {
position: relative;
overflow: hidden;
}
.fullscreen-bag {
overflow: hidden;
position: absolute;
height: auto;
width: auto;
z-index: -100;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
#VideoBack {
position: absolute;
z-index: -100;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
i found the solution. I deleted the #VideoBack rules, and i applied the .fullscreen-bag inside the video tag.
As you can see in the image I provided the video is not full width, I want it to fit the rest of the container. Can anyone tell me what I'm doing wrong, here is the image:
Image of the div and video
The code:
HTML
<section class="content-2">
<div class="fullscreen_bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg_video">
<source src="images/Ajvar.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video></div>
</section>
CSS
.content-2 {
height: 350px;
overflow: hidden; }
.fullscreen-bg {
max-height:350px;
width: 100%;
height: 100%;
position: relative;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
z-index: -100;
background-size: cover;
overflow: hidden;}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
Try width attribute for video tag:
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg_video" width="350" height="350">
<source src="images/Ajvar.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I am trying to center an image that has a background video container. I would like for it to be exactly centered vertically and horizontally. At the moment i can only center the image horizontally but having trouble centering it vertically. When i do center the image it does'nt become responsive. Any ideas?
This is how it looks on my header area:
http://imgur.com/a/N6vNg
HTML code:
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume= "0">
<source src="video/backgroundAnime.mp4" type="video/mp4">
<source src="video/backgroundAnime.webm" type="video/webm">
<source src="video/backgroundAnime.ogv" type="video/ogg">
</video>
</div>
<img src="img/albayda.png" class="img-responsive center-block">
</div>
CSS code:
.header-container{
width: 100%;
height: 800px;
border-left: none;
border-right: none;
position: relative;
padding: 20px;
}
.video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
}
video{
position: absolute;
z-index: -1;
width: 100%;
}
.img-responsive{
margin:0 auto;
}
.header-container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
That should do it.
Instead of using <img> tag you may use a <div> with centered non-repeating background and then make it fill container with position:absolue;left:0;right:0;top:0;bottom:0 and optional pointer-events:none.