I'm trying to imitate the front page of lumosity.com but I am unable to set a video background to the section. Here's what I've done so far:
HTML
<section id="banner">
<video id="videobcg" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="https://static.lumosity.com/resources/home_page_templates/574/neuralnetwork.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<p>This is text that is in front of video, we do not want the z-index of video to be greater than content. Hence background!
</p>
</section>
CSS
#videobcg {
position: absolute;
top: 0px;
left: 0px;
padding: 5em 2em 4em 2em;
z-index: -1000;
overflow: hidden;
}
As you can see my code doesn't work, the video remains hidden somewhere on the webpage. Any ideas?
I used this as an example and modified your css.
Example 1: Video as background of containing div
In this example the video only plays as the background of the containing div, similar to lumosity.com:
JSFIDDLE 1
#banner {
position: relative;
height:300px;
width:100%;
overflow: hidden;
}
#videobcg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
height:auto;
width:auto;
z-index: -100;
}
Example 2: Video as background of full page
JSFIDDLE 2
#videobcg {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
transition: 1s opacity;
}
I use BIGVIDEO.JS to do the Video Background :
HTML
<div class="background-image-hide parallax-background video-wrap" data-video-wrap="images/slides/video.mp4" data-img-wrap="images/slides/video.jpg">
</div>
JS
var bigVedio = function() {
// initialize BigVideo
var BV = new $.BigVideo({
container: $('.video-wrap'),
forceAutoplay: isTouch
}),
V = $('.video-wrap').attr('data-video-wrap'),
img = $('.video-wrap').attr('data-img-wrap');
if (typeof V != typeof undefined) {
if (!isTouch) {
BV.init();
BV.show(V, {
ambient: true,
doLoop: true
});
} else {
BV.init();
BV.show(img);
}
}
};
css
.background-image-hide {
position: absolute;
top: -30px;
height: 150%;
width: 100%;
background-size: cover !important;
z-index: 0;
background-position: 50% 50%;
}
Hope this will help you.
Related
I have a video tag that I want to play continuously while a user can simultaneously do stuff on the site. However I have found that if the background transitions between background images that the video starts buffering. I have a runnable example in the snippet below.
Note: The buffering does not seem to occur if the snippet is run normally, but does occur if you put the snippet in 'full page'.
function changeBackground() {
const randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);
const element = document.getElementById('background');
const currentOpacity = element.style.opacity;
const currentBackground = element.style.backgroundImage;
switch (currentBackground) {
case 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")': {
element.style.backgroundImage = 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")';
break;
}
case 'url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")': {
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")';
break;
}
default: {
break;
}
}
}
const element = document.getElementById('background');
element.style.backgroundImage = 'url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png")'
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
transition: background-image 3s ease-in-out;
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
What could be the cause and is there a way to prevent the video from buffering while still having a background image transition?
Edit: May be important to add that I'm on Chrome on MacOS.
Edit 2: From the responses I have gathered not everyone can reproduce the problem, so I went to an old-timey windows PC and tried it there. Found out that the background-transition was being really slow and laggy but the video kept playing without problem. It also works on safari on MacOS so this appears to be a Chrome MacOS-only problem.
I have to admit I'm not entirely sure of what happens here... Given it's not a 100% repro case, it's also hard to be sure any workaround actually works...
But here are some comments and ideas.
It seems this happens only with .mp4 files. I could reproduce with other .mp4 videos but never with any .webm file.
So one thing you may want to try is to reencode your video in webm, it could be that Chrome's mp4 decoder has some issues.
It seems that CSS animations do not cause this issue. So you could rewrite your transition code into a CSS animation, with the major problem that you won't be able to stop it in the middle (but it seems background-transitions are bad at this anyway).
function changeBackground() {
const element = document.getElementById('background');
if(element.classList.contains('apple')) {
element.classList.remove('apple');
element.classList.add('so');
}
else {
element.classList.add('apple');
element.classList.remove('so');
}
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
#background.apple {
animation: apple-to-SO 3s ease-in-out forwards;
}
#background.so {
animation: SO-to-apple 3s ease-in-out forwards;
}
#keyframes apple-to-SO {
from {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
to {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
}
#keyframes SO-to-apple {
from {
background-image: url("https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png");
}
to {
background-image: url("https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg")
}
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
Now if you prefer js control, it seems that Web-Animations aren't affected either.
let current = 1;
const urls = [
"https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png",
"https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg"
];
function changeBackground() {
const element = document.getElementById('background');
element.animate({
backgroundImage: ['url(' + urls[current] + ')', 'url(' + urls[+(!current)] + ')']
}
, {
duration: 3000,
iterations: 1,
fill: 'both'
}
);
current = (current + 1) % 2;
}
#background {
display: flex;
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
}
#button {
display: flex;
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button' onClick="changeBackground()">Click me to change the background!</div>
<video
id='video'
autoplay
muted
loop
controls
src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"/>
</div>
Try to enable / disable hardware-acceleration on Chrome.
I can't reproduce the problem so it might be an issue with your ISP and latency (I don't have that problem at 145 Mbps). Looking at your code it isn't very efficient with that switch. The demo below uses an array (added another image as well). BTW add flex to elements that contain children elements otherwise it's pointless.
document.getElementById('button').onclick = changeBackground;
let i = 0;
function changeBackground(e) {
const images = ["https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png", "https://i5.walmartimages.ca/images/Large/428/5_r/6000195494285_R.jpg", "https://media.istockphoto.com/vectors/circuit-board-seamless-pattern-vector-background-microchip-technology-vector-id1018272944"];
const background = document.getElementById('background');
i++;
if (i >= images.length) {
i = 0;
}
background.style.backgroundImage = `url(${images[i]})`;
return false;
}
#background {
position: absolute;
width: 100%;
height: 100%;
z-index: -10;
background-size: contain;
background-image: url(https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png);
transition: background-image 3s ease-in-out;
background-repeat: repeat-x;
}
#button {
width: 200px;
height: 100px;
background-color: orange;
text-align: center;
}
#video {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 350px;
}
<div id='root' style='width: 100%; height: 500px'>
<div id='background'></div>
<div id='button'>Click me to change the background!</div>
<video id='video' autoplay muted loop controls src="https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4"></video>
</div>
This question is interesting.
I think the buffer may be due to
This line Math.floor(Math.random()*16777215).toString(16);
also about the video resolution and to what extent it has been resized
also may be due to some unnecessary codes if any.
I have 2 fullscreen background videos that I want to change dynamically based on the time of day (ex. looping day video from 6 a.m. to 7 p.m. vs. looping night video from 7 p.m. to 6 a.m.). Currently, I'm commenting out the video that I don't want to play. Any advice on how to do this with JS would be much appreciated. (Videos are located in a folder called "video").
HTML:
<div class="video_contain">
<!-- video day -->
<video autoplay loop id="video-background" muted plays-inline>
<source src="video/catbeats-loop-day-720p.m4v" poster="img/catbeats-day.gif" type="video/mp4">
</video>
<!-- video night -->
<!-- <video autoplay loop id="video-background" muted plays-inline>
<source src="video/catbeats-loop-night-720p.m4v" poster="img/catbeats-night.gif" type="video/mp4">
</video> -->
</div>
CSS:
.video_contain {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -100;
}
#video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
try to create the src element with js depeding on the hour of the day and then append it to your video element, answer is inspired from this post.
changing source on html5 video tag
feel free to correct and improve this code.
var currentTime = new Date().getHours();
var video = document.getElementById('video-background');
var source = document.createElement('source');
if (6 <= currentTime && currentTime < 7) {
source.setAttribute('src', 'https://storage.googleapis.com/coverr-main/mp4/The-Slow-Dock.mp4');
video.appendChild(source);
video.play();
}
else {
source.setAttribute('src', 'https://storage.googleapis.com/coverr-main/mp4/Night-Traffic.mp4');
video.appendChild(source);
video.play();
}
.video_contain {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -100;
}
#video-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<div class="video_contain">
<video autoplay loop id="video-background" muted plays-inline></video>
</div>
I am trying to replicate the Landing Page used on X Theme's Integrity 1, but I run into difficulty figuring out a way to keep the video full screen and focused at the center without making it the entire background. I have tried:
<style type="text/css">
body {margin: 0; padding: 0; background-color: green;}
#landing {margin: 0; padding: 0; top:0; left: 0; height: 100%; width: 100%; position: absolute}
video {top:0; left:0; min-width: 100%; min-height: 100%; width: 100%; height: auto; background-size: cover; bottom: 0;}
</style>
<body>
<div id="landing">
<video id="sey" src="seydrone.mp4#t=57,286" preload="auto" autoplay="true" muted="muted" loop="loop" type="video/mp4"></video>
<span id="welcome">DISCOVER NATURE'S SECRETS</span>
</div>
</body>
When the browser is in full-screen, it works perfect, but upon shrinking the page the landing video does not respond as per the X Theme demo does. I intend to place my nav-bar as per the demo and scroll down just the same which is why the background option is not possible.
Any help/suggestions would be thoroughly appreciated.
They have used some JavaScript for that, but there is a way to do it without JS.
Change your video styles to this:
video {
// Force video to cover screen
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
// Center video
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I'm trying to add a blue color overlay to my full screen video tag that's pulling the video feed from the users webcam (using JS to do this.) I'm unable to get the blue overlay to appear on top of the video, as it displays behind it, and if the div isn't set to absolute, the video stops being full screen - any thoughts?
<div class="fullscreen-bg">
<div class="overlay--blue">
<video id="videoElement" class="fullscreen-bg__video"autoplay="true"></video>
</div>
</div>
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#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%;
}
}
.overlay--blue {
background-color:rgba(19, 186, 228, 0.8);
position: absolute;
width: 100%;
height: 100%;
}
Since #videoElement is a child of .overlay--blue, #videoElement will by default be shown on top of .overlay--blue.
If you want the video to be shown behind the overlay, you can either give it a negative z-index (z-index: -1;). You can also edit the HTML by moving the video outside the overlay, before it, like so:
<div class="fullscreen-bg">
<video id="videoElement" class="fullscreen-bg__video"autoplay="true"></video>
<div class="overlay--blue"></div>
</div>
Hope this helps
I am trying the video tag of HTML5 and want to give background size cover property to it. It is not taking that property. I had given width: 100% and height: 100%, also the video go outside container.
How I can achieve it ?
CSS:
video#videoId{
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
}
Fix para IE:
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
video { display: block; }
I suggest you to put your video tag inside a div wrapper.
Rather than seeing video deformed, I prefer show black background.
DEMO.
In this way, video will adapt itself to the parent div size.
HTML
<div id="main">
<video id="bunny" controls>
<source src="../video/video.mp4>
</video>
</div>
CSS
#main {
height: 300px;
width: 300px;
background-color: black;
}
#bunny {
width: 100%;
height: 100%;
}
I needed to center the video and use it as a background, so I've cleaned and enhanced the answer Jagu provided. It now optionally centers the video, and has an optional color overlay.
Live Demo: https://jsfiddle.net/prrstn/vn9L2h1w/
HTML
<div>
<!-- Optional attributes, remove the features you don't want.
Add the "controls" attribute to get the video player buttons -->
<video autoplay loop muted>
<source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
</video>
</div>
CSS
div {
/* This keeps the video inside the div */
position: relative;
/* These are optional based on the size of
the area you want the video to cover */
width: 100%;
height: 500px;
/* Color overlay on video, optional */
background-color: rgba(0, 0, 0, 0.5);
}
video {
position: absolute;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
/* This puts the video BEHIND the div, optional */
z-index: -1;
/* These two properties center the video, optional */
left: 50%;
transform: translateX(-50%);
}