I want the video tag to stick to the top (or bottom from the element above the video tag). When one resizes the window with the current code I am using, the video element will also remove itself from the top (or bottom from the element above in hierarchy in HTML). Is there a way to prevent the video coming loose from its top? I assume this is because the video tag is trying to keep its ratio and might has something to do with the width: 100%.
I made a JSFiddle here and here is my code:
HTML:
<div class="background-video">
<video autoplay loop muted>
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
CSS:
.background-video
{
position: relative;
}
.background-video video
{
position: absolute;
top: 0;
right: 0;
left: 0;
margin: 0 auto;
height: 1080px;
width: 100%;
}
So how do I make it so that the video tag doesn't resize in an unpleasant way and still fills the space correctly?
You have to add to you CSS this line for responsive elements of video, image, iframe, etc.
CSS
audio, iframe, img, video {
max-width: 100%;
}
Related
I have a video that is the background of the page. The video is exactly where it needs to be but is causing a huge gap between it and the next element. When I inspect the element there is no margin or padding, just the video which is the correct size. I am not sure where the gap is coming from or how to remove it.
<video loop muted autoplay class="bg-video">
<source src="/assets/images/test.MP4" type="video/webm">
</video>
<h2 class="text-center">NEWS</h2>
That is the HTML. Nothing there but the video and the next element, which is an h2.
CSS:
.bg-video {
position: relative;
z-index: -100;
overflow: hidden;
left: 50%;
transform: translate(-50%, -50%);
}
screenshot of the space (screenshot has been resized)
you could try switching your position to fixed instead of relative, this takes it out of the flow of elements and it shouldn't be able to affect any others. i did a similar thing and the css was this:
#bgvid {
position: fixed;
min-width: 100%;
min-height: 100%;
z-index: -100;
}
Quick question since I can't find it here.
I have a video and I have attached it with the following code on html
video {
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<section class="banner">
<div class="banner-header">
<video poster="#" autoplay="true" loop>
<source src="coding.mp4" type="video/mp4" />
</video>
</div>
</section>
When I try it out, my video shows, it plays and loops. Perfect. Except the size is so massive that I can scroll to the right and I no longer see the body just the background and the far right side of the video.
I want the video to be smaller and to align properly with the whole responsive website. And below the video is pretty much the body of the website, which are my skills and contact details. So the video serves as a "header" even though I have a proper header with navigation buttons and what not.
In your CSS, remove
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
then specify a numerical value for width, for example 50% or 400px.
The browser will proportionally scale the video, so you don't need to set the height.
Solved.
On my CSS I had the following code
.banner {
width: 150%;
background-color: #6991AC;
}
changed it from 150% to 100%, with the CSS code for video from the question I changed it to only contain width and height, with width set to 100% and height to auto.
I am having a client's Html Site Project, Where I used a video in the background of site's homepage, I used a absolute div outside of video with 100% height and width, My Client don't want a scrollbar on y-axis & I also cant use overflow:hidden; property of CSS, may be Client will adds some content in future, I am still confused if i have given 100% height and width to parent element of video then from where the scrollbar is coming when I use bottom:0 poperty with that div then scrollbar won't show but the size of video would be changed, why its happening please help me. Thanks in advance & and forgive me if I could not clear the exact problem which I am getting.
Site URL: http://trekoholic.com/site/
I used body { overflow-y: hidden; } as a temporary basis
CSS and HTML:
div#video-player {
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
<div id="video-player">
<video width="100%" height="100%" loop="" autoplay="">
<source type="video/webm" src="Video/eat.webm"></source>
</video>
</div>
you have to change
div#video-player {
position: absolute;
}
by
div#video-player {
position: fixed;
}
it works but has a counter, if the video has the largest height to the height of the bottom of the screen will not see, but if I understood correctly, this is desired, even in the future will allow you to add more content and will be seen without problems
if you want the full video display just add height: 100% to div#video-player
div#video-player {
position: fixed;
height: 100%;
}
the counter, if the video has different proportions than the screen may not fill the entire width
so I really hope this helps
I'm helping out with a website, we want to have a video background when you land on the site.
It works just fine on Google Chrome but it does not work as expected on Safari.
Here is the website (please compare it with chrome and safari): http://tinyurl.com/nbe8rzy
HTML For video:
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="<?php bloginfo('template_url'); ?>/assets/img/video1.mp4" type="video/mp4">
</video>
CSS for video:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
background-size: cover;
z-index: 1; }
I'm using fixed position with z-index 1 on video, and relative positioning with higher z-index then 1 on rest of the divs (so the video stay in the background).
Problems on safari:
Video streching is delayed
The other divs does not show
Questions:
How can I fix this? (Code/link/help is very much appreciated!)
Is it possible to use video background for mobile/ipad? or should it fallback to a image?
Update your video background div to
#yourvideobackground {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
To work around and have the video work on most browsers including Safari, you're going to have to give it an absolute position, and set its z-index below all other elements above it.
You can't use the background-size attribute either, not for a video.
If you want that inside of another div, make sure that the parent div has an a relative position set.
If you don't want to go that route, you can use a nifty plugin that I've had success with.
https://github.com/Victa/HTML5-Background-Video
Good luck!
Got the video background working but it either pushes down my content or covers everything. I've played around with z-index but it only seems to be working with text.
<video id="videobcg" preload="auto" autoplay loop muted="muted" volume="0">
<source src="_videos/college_de_boulogne.mp4" type="video/mp4">
<source src="_videos/college_de_boulogne.webm" type="video/webm">
</video>
</body>
#videobcg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
overflow: hidden;
Have you tried -1 index for video element? (It would really help if you could show us more code).
It will never push down your content if it's position stays absolute.
As your last resort you can always use some JQuery plugins: http://www.sitepoint.com/background-video-plugins/, at least it will guarantee you an alright cross-browser support.