For html coding how is a video inserted in a website background like this example: http://www.buildingengines.com/. I just need a step in the right direction.
Place video with lower z-index as the content then position content accordingly.
video {
z-index: 0;
}
h1 {
z-index: 2;
position: fixed;
top: 20px;
left: 40px;
}
<video width="400" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1>Text</h1>
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;
}
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%;
}
I have a background video that I have got to scale based on the size of the browser/device. Im now trying to figure how to make it constantly go to the top of my page. For some reason when it scales down it pushes itself down.
The only way to adjust it is to make the height of the class .landing_video smaller which would then move it back to the top position, or I can make the top of #landingbg to a negative value. Are these the only ways to adjust the position to constantly stay at the top position?
HTML
<div id="landbg">
<video loop muted autoplay class="landing_video">
<source src="video/landingbg.mp4" type="video/mp4">
</video>
</div>
CSS
/*----Landing Page Styling----*/
#landbg{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.landing_video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The video looks fine at 1920x1080 its when it scales down to the device scale it almost looks like a form of padding. Any help would be appreciated.
Here is a fiddle to illustrate the problem http://jsfiddle.net/md7fqtvh/2/
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.