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!
Related
I'm quite new to coding and tried creating a website with what I know to use as my future portfolio. However, my content overlaps my header when I resize my browser, I am hoping for smooth or at least something that doesn't overlap without using tons of media queries.
My header is a 1920x1080 video that is set to width 100%, object-fit: cover and position: absolute. It has header text on top of the header video. My whole page has a full-screen scroll, so my header video and text is wrapped in a div that is set to 100vh.
How do I stop my content from overlapping the header? I am hoping for something that resizes along with the header video, creating a block that the content can't go over, but anything that helps me otherwise would be great.
I tried adding a div but then the div would make the content go too far below sometimes.
I also tried using a 1920x1080 picture that has the same properties as my header video except the absolute positioning that I tried placing above my header but below my header text, but then the picture doesn't resize the same as the video and instead just takes the up the whole 1080px vertically.
I tried using media queries which worked, but I hope there is something else I can do other than using media queries.
Here is the code:
#header-video {
width: 100%;
object-fit: cover;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
overflow-x: hidden;
}
.header-text {
position: relative;
top: 175px;
left: 100px;
color: white;
}
.red-block {
opacity: 1;
width: 100%;
margin-top: -310px;
object-fit: cover;
overflow-x: hidden;
}
<div class="header-text">
<div class="h1-text">HEADER</div>
<div class="h2-text">TEXT</div>
</div>
<div class="red-block">
<img src="resources\red block.webp">
</div>
<header>
<video id="header-video" autoplay loop muted>
<source src="resources\header.webm" type="video/webm">
</video>
</header>
</div>
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 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