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>
Related
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 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.
first，I create a webpage,and in this page has a button linked to
the html5 video player page(this is another page)
and then, I want to achieve that when click the button, the next
page(html5 video player page)can automatic full screen.
I want it to run in IPhone
I try it use the code
window.load=function(){
myVideo=document.getElementById('video')[0];
if(!myVideo.webkitDisplayingFullscreen){
goFullscreen();
}
function goFullScreen(){ myVideo.webkitEnterFullscreen();}
}
and the chrome said:
Uncaught InvalidStateError:Failed to execute'webkitEnterFullscreen'
on 'HTMLVideoElement': This element may only enter fullscreen mode in
response to a user gesture
so is there some other solutions to get the fullscreen mode automatically??
you can do a video as background of your page like my example, check the fiddle
http://jsfiddle.net/N4Lbp/4/
fullscreen: https://jsfiddle.net/N4Lbp/4/embedded/result/
HTML:
<video autoplay loop poster="http://peach.blender.org/wp-content/uploads/bbb-splash.png" id="video_bg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_720p_stereo.ogg" type="video/ogg">
<source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" type="video/mp4">
</video>
CSS:
*, *:after, *:before {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body {
height: 100%;
}
#video_bg {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: -100;
background: url(http://peach.blender.org/wp-content/uploads/bbb-splash.png) no-repeat;
background-size: cover;
}
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%);
}
I've been trying to set a video as background, I have the flv-file and youtube-link. Putting it on my website isn't that difficult with html5 video-tag or jquery but I can't find how I can put it on my website but not auto starting. I have a semi-transparent rectangle where the text will come over. So my idea was creating a button or link to let the text and rectangle dissappear and letting the video play.
Does anyone knows a good plugin or script to do this or can someone bump into the right direction.
greetz
You can do this with native browser html5 video player too which will be much faster, no need to use a plugin. Try this:
Here is working jsFiddle example.
jQuery:
$(document).ready(function() {
var windowH = $(window).height();
$('#main_container, #overlay').height(windowH);
$(window).resize(function () {
var windowH = $(window).height();
$('#main_container, #overlay').height(windowH);
});
});
css:
body { background-color: #000000; font-family: Arial; font-size: 12px;
color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%;
background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
z-index: 9998; }
html:
<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
Note: Used overlay div for deactivating controls and you can use whatever content on your video, like in jsFiddle example.
If you want a script, you can try: https://github.com/sydlawrence/jquery.videoBG
In the documentation here: http://syddev.com/jquery.videoBG/index.html#documentation, there seems to be an auto play option with a Boolean parameter...so I'm guessing just set it to false
autoplay
bool