You can see background effect here: https://jsfiddle.net/xorkme75/embedded/result/
background is fixed here. so when you scroll the page, you can see rest of the image. for example scroll down and you can see the lady's face.
Works both chrome and firefox.
But when I add video to header. This effect not working in chrome anymore. Here is example (please see in chrome): http://areafordemos.net63.net/chrome.html
How did I break it?
I added to CSS:
#video-container {
top: 10%;
width:100%;
height:70%;
overflow: hidden;
z-index:-1;
}
video.fillWidth {
width:100%;
}
and I added to HTML:
<div id="video-container">
<video autoplay muted loop paused class="fillWidth">
<source src="xhttp://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div><!-- end video-container -->
CSS Code of broken area:
.dzen_bg {
background-image: url('http://seventhqueen.com/themes/kleo/sensei-e-learning/wp-content/uploads/sites/6/2015/06/hero16.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 100% 12px;
background-attachment: fixed;
padding-top: 10px;
background-size: 100% 100%;
}
When I delete width: 100%; from video.fillWidth for example effect is back but video doesn't look like I want. So I am literally stuck.
What have I tried so far?
I- I tried to add z-index:-2; to .dzen_bg. It actually solved it. But another problem occurred. After that, I can't hover the inside of that div .dzen_bg anymore. Doesn't respond to mouse moves.
II- I deleted height: 70% in #video-container. Solves the problem as well but how I will set video height right now? It is covering the whole screen now. I also tried to set height: 70% to video.fillWidth after but video doesn't cover the screen anymore.
I have never puzzled that much. Is there any solution for this problem?
Your fiddle is fine, you just need to move your section down a bit.
I have made a working (with video) fiddle here is the result
Related
I've spent days now trying to fix/work around this infuriating bug which appears to be WebKit/Safari focused (desktop and mobile) and would really appreciate some help figuring out a workaround.
The issue is that no matter what I do, the background video 'jumps' every time the page loads before snapping into place and playing properly.
Body code
<div class="head home-head section">
<video id="background-video" autoplay preload loop muted playsinline poster="images/poster.jpg">
<source src="images/hero.mp4" type="video/mp4">
</video>
</div>
SCSS
.head {
width: 100%;
height: 80%;
height: 80vh;
min-height: 650px;
text-align: center;
background: #000;
position: relative;
padding: 0;
margin: 0;
overflow: hidden;
#background-video {
width: 100%;
width: 100vw;
min-height: 650px;
height: 80%;
height: 80vh;
object-fit: cover;
left: 0;
top: 0;
pointer-events: none;
z-index: 2;
opacity: 0.6;
}
I think it may be related to using object-fit: cover but I'm not sure. I've tried using object-fit: fill but it still jumps around, just in a different way and then when it has loaded, the video is squashed depending on viewport width.
I have uploaded the problematic code to this page here: http://royalwells.agency/stackoverflow. Remember this only seems to happen in WebKit so Safari for Mac, or any browser on iOS.
I have even tried overlaying a "loading" div on top of the video and hiding it after a few seconds, but - get this - even if I have this loading div appear for 15 seconds, when it fades out the video STILL jumps for a second before playing.
I spent hours searching the internet for solutions but have found nothing so far and really need to figure out a workaround.
Would be so, so grateful for help on this.
I am trying to insert a video in my webpage but in chrome its not showing i tried to run in elde its working there but i cant resize it.
<div class="parentDiv">
<video class="img/car.mp4" autoplay></video>
</div>
I made a parent div for the video container and place the video in there. I hope its correct. but cant resize the video as i want.
/* car video footer */
.parentDiv{
height: 30vh;
weight:100%;
background-color: rgb(148, 15, 96);
}
video{
object-fit: cover;
}
I'm trying to create a site with a looping video for a background that has an image with a transparent background overlayed over the video. I am able to create the video background and overlay an image but when I do so, the transparent parts of the image become filled in with white. This makes my image appear as if it is in a white box when I just want the non-transparent content to be visible. Is there a way to prevent this?
To provide some additional information, the image and video share the same parent div with the image coming before the video. The video is an mp4 file and the image is a png. The image has no CSS applied and the video has the following applied at the moment:
video {
margin-top: 4em;
width: 100%;
object-fit: cover;
filter: saturate(75%);
}
You'll need to provide more code to show us the issue. Using your video CSS alone, I was not able to reproduce the problem.
In fact, here's a working demo with what you're asking for working just fine:
div {
position: relative;
}
img {
pointer-events: none;
position: absolute;
top: -10%;
width: 100%;
z-index: 1;
}
video {
object-fit: cover;
filter: saturate(75%);
width: 100%;
}
<div>
<img src="https://i.imgur.com/VRV5rlZ.png">
<video autoplay loop muted>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
</video>
</div>
I'm seeing a strange bug (only) in Safari (recent versions, desktop and mobile) where extra space is added above/below an HTML5 video. That might be okay in some scenarios, but in mine it reveals a background image being used to work around an IE video/poster bug.
I'm inclined to believe that this is a Safari bug, as if I toggle various CSS properties within the dev tools or with JavaScript, the problem goes away. The JS approach could potentially be a solve, but the user has to suffer through the flash of unstyled content and I'd prefer to work around or correct the issue at the CSS level. (I've tried various workarounds: setting height on video, changing display on video)
Here's the relevant HTML:
<section class="series" style="display: block;">
<video autoplay="" class="series-video series-video-desktop" loop="" muted="" playsinline="" poster="data:image/gif,AAAA" src="https://iandevlin.com/examples/speechapi-video/video/big-buck-bunny.mp4"
style="background-image: url(http://fillmurray.com/1024/768);"></video>
</section>
... and CSS:
section {
display: block;
min-height: 100%;
width: 100%;
}
video {
background: none no-repeat 50% 50% transparent;
background-size: contain;
display: inline-block;
height: auto;
width: 100%;
}
Also, FWIW, here's my JS fix:
window.addEventListener('load', function () {
var xs = document.querySelectorAll('.series');
[].slice.call(xs).forEach(function (x) {
// doing this via CSS has no effect
x.style.setProperty('display', 'block');
});
});
JSFiddle
I was able to solve the issue noted above by replacing width with min-width and max-width:
video {
background: none no-repeat 50% 50% transparent;
background-size: contain;
display: inline-block;
height: auto;
/* width: 100%; */
min-width: 100%;
max-width: 999px;
}
Updated Fiddle
I'm making responsive video as background. I want this video to be 100vh in height and automatically cropped in width when the user uses vertical device orientation(phone for example) to preserve aspect ratio. Also i want to remove the white bars which you see in the picture below. How to do this?
video{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
width: 100vw;
}
#media (pointer:coarse) {
#media (hover: none), (hover:on-demand) {
video {
height:100vh;
}
}
}
<video src="http://techslides.com/demos/sample-videos/small.mp4" autoplay muted loop></video>
I don't know if your background-approach works with videos, but you can do this:
<video id="video">
<source/>
</video>
and
#video{
position: fixed;
right: 0;
bottom:0;
min-width: 100%;
min-height: 100%;
}
This will result in full-screen video that gets cropped when the parent-container has different ratio.
If you want to use it as background, just use another container with fixed-position for the content. You can find a full example here: https://www.w3schools.com/howto/howto_css_fullscreen_video.asp