We Keep Coding

Javascript Splash Screen + Media Query

I'm using js for a splashscreen with a video background. If anyone clicks on it, it fades into the home page. For mobile screens, I want to add an image that shows instead of the video. My initial attempt showed the image, but it wouldn't fade out after I clicked on it. Here's my code before my attempt:
<style>
#splashscreen {
background-color: #000000;
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.logo {
position: fixed;
top: 50%;
left: 50%;
z-index:100000;
height: auto;
max-width: 55%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 600px) {
.logo {
max-width:90%;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index: 10000;
}
</style>
<div id="splashscreen">
<a href="#" class="enter_link">
<img class="logo" src="XXXXXXXXXX">
<video playsinline="" autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
<source src="XXXXXXXXXXX" type="video/mp4">
</source></video></a>
</div>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.enter_link').click(function () {
$(this).parent('#splashscreen').fadeOut(500);
});
});
//]]>
</script>
Thank you for any help.

I've created a fiddle which solves your issue.
$(document).ready(function() {
$(".enter_link").click(function(e) {
e.stopPropagation();
$(this)
.parent("#splashscreen")
.fadeOut(500);
});
});
#splashscreen {
background-color: #000000;
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.logo {
position: fixed;
top: 50%;
left: 50%;
z-index: 100000;
height: auto;
max-width: 55%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 600px) {
.logo {
max-width: 90%;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index: 10000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">
<a href="#" class="enter_link">
<img class="logo" src="XXXXXXXXXX">
<video playsinline="" autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
<source src="XXXXXXXXXXX" type="video/mp4">
</source>
</video>
</a>
</div>
The changes I've made are,
$(document).ready(function() {
$(".enter_link").click(function(e) {
e.stopPropagation();
$(this)
.parent("#splashscreen")
.fadeOut(500);
});
});
Your anchor tag doesn't cover the whole page though, instead you could have the click event directly on #splashscreen and do the following in your method,
$(this).fadeOut(500);
UPDATE
To track first visit to the site, you can use localStorage - you can set a flag called firstVisit
let firstVisit = !localStorage.getItem('firstVisitCompleted')
if (firstVisit) {
showSplashScreen()
localStorage.setItem('firstVisitCompleted', true)
} else {
hideSplashScreen()
}

Checkout this fiddle https://jsfiddle.net/0egocjLa/
Basically your anchor tag was missing height. Provide an height and click function will work.
$(document).ready(function() {
$(".enter_link").click(function(e) {
e.stopPropagation();
$(this)
.parent("#splashscreen")
.fadeOut(500);
});
});
#splashscreen {
background-color: #000000;
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.logo {
position: fixed;
top: 50%;
left: 50%;
z-index: 100000;
height: auto;
max-width: 55%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 600px) {
.logo {
max-width: 90%;
}
video {
display: none;
}
a{
display:block;
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="splashscreen">
<a href="#" class="enter_link">
<img class="logo" src="https://www.stackoverflowbusiness.com/hubfs/logo-so-white.png">
<video playsinline="" autoplay="" muted="" loop="" poster="https://cdn.shopify.com/s/files/1/2999/0620/files/black-bg.png" id="bgvid">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</source>
</video>
</a>
</div>

Keep HTML5 Background-Video fullscreen (on mobile)

Problem: When I resize my browser window, my already well aligned video will keep filling the screen while sustaining aspect ratio, as long as the width of the window is larger than the height. When the height of the window starts to get larger than the width, whitespace will appear on the top and bottom of the video.
My Code: I´m currently using the following CSS Code for the below HTML code:
.bgvideodiv {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: center;
-webkit-filter: blur(5px) brightness(50%);
-moz-filter: blur(5px) brightness(50%);
-o-filter: blur(5px) brightness(50%);
-ms-filter: blur(5px) brightness(50%);
filter: blur(5px) brightness(50%);
overflow: hidden !important;
}
.bgvideo {
height: 100%;
min-width: 100%;
width: auto;
/* Same: object-fit: fill; */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.scaler {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
text-align: center;
overflow: hidden;
transform: scale(1.2);
}
<div class="scaler">
<div class="bgvideodiv">
<video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
<source src="hero.mp4" type="video/mp4"></source>
<source src="hero.webm" type="video/webm"></source>
</video>
</div>
</div>
(You will have to add your own video mp4 and webm for this snippet to work)
I´d prefer a pure CSS solution, but JS / jQuery is fine, too.
I´VE FOUND A SOLUTION FOR THIS; SEE BELOW.

try this
.bgvideo {
width: 100%;
height: auto;
/* Same: object-fit: fill; */
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%)
}

Hope this might help :)
.bgvideodiv {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.bgvideodiv video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class="bgvideodiv">
<video playsinline="" autoplay="" muted="" preload="auto" poster="" loop="" class="bgvideo">
<source src="hero.mp4" type="video/mp4">
<source src="hero.webm" type="video/webm">
</video>
</div>

Turns out bulma, the CSS Framework I´m using, automatically applies a max-width: 100%; rule to all video, img, object, embed and iframe objects (out of no reason, as it seems). I´ve disabled the rule with the following snippet, insert it anywhere below the embedding of bulma:
embed, iframe, img, object, video {
max-width: none;
}
Any max-width rules which should override this value will have to be placed below this one.
Everything is working fine now, thanks for any suggestions anyway.

If you're using the CSS Framework Bulma and/or Buefy, you need to modify 3 elements in order to adjust the embedded video. Change your main.css file to:
embed,
iframe,
video {
height: 400px; /* adjust pixels if needed */
max-width: 100%;
}

video {
width: 100%;
height: 100%;
object-fit: cover;
}

How to make video background responsive?

My background video is displaying correctly on full sized laptops/desktop display but when I start to minimize it gets clunky and the video zooms in on a building and its height too long on the mobile display.
What media queries can I use to make this video background more responsive?
It doesn't have to be perfect on mobile but somewhat decent.
.fullscreen-bg {
position: relative;
top: 50%;
right: 50%;
bottom: 0px;
left: 0px;
overflow: hidden;
z-index: -1px;
}
.fullscreen-bg__video {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
background-size: cover;
transition: 1s opacity;
display: inline-block;
}
#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%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
<section>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/index-11.jpg" class="fullscreen-bg__video">
<source src="video/BnW.webm" type="video/webm">
<source src="video/BnW.mp4" type="video/mp4">
</video>
<div class="container container-wide slider-container">
<div class="jumbotron text-center bg-btn">
<h1 data-wow-duration="2s" class="wow fadeIn">Beautiful.<br>Views.<small data-wow-duration="2s" class="wow fadeIn">City of Chicago</small></h1>
<p data-wow-duration="2s" class="big wow fadeIn"></p>
</div>
</div>
</div>
</section>

try this
position: relative;
right: 0;
bottom: 0;
max-width: 100%;
min-height: 100%;
width: auto;
height: auto;

Bootstrap video jumbotron

I'm trying to get a video to cover a bootstrap Jumbotron with no success. This seems like a very simple thing to do, but everything I try seems to fail.
I've tried the solution posted here with no success. I've also tried just setting the position of the video to absolute, and setting all sides to 0, but that doesn't seem to work either. What am I doing wrong?
This shows what is going on:
https://jsfiddle.net/kae4q601/
.jumbotron{
position: relative;
/* Tried setting the height. Didnt work either */
/* height: 200px; */
}
#video-background {
position: absolute;
bottom: 50%;
right: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<video id="video-background" preload muted autoplay loop>
<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">
</video>
<div class="container">
Hello World
</div>
</div>

Looks like you've got a lot of unnecessary css going on. To start I would definitely define the jumbotron z-index in order to keep the gray padding in the background.
.jumbotron{
position: relative;
z-index:-101;
}
Next some cleaner simpler code for the video background like so:
#video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
width:100%;
}
Here's the fiddle https://jsfiddle.net/kae4q601/5/ Let me know if this is what you were trying to achieve.

Since .jumbotron has a grey background, setting the the video background to z-index: -1000; will make the video display behind the grey background, thus invisible. Also, when making video backgrounds cover, the parent needs to have overflow:hidden, not the video itself.
CSS:
.jumbotron{
position: relative;
overflow: hidden;
height: 200px;
}
.container {
position: relative;
color: #ffffff;
z-index: 2; /* Show content above video */
}
#video-background{
position: absolute;
height: auto;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 1;
}
Here is a working fiddle: https://jsfiddle.net/kae4q601/15/

Fullscreen background video and keep it centered

I'm trying to create a site where I have a background video playing with some HTML5.
This is all working perfectly, it works just the way I want it.
But I also want to keep the image centered on the screen, even when a user resizes the browser.
<video id="video" src="video/video.mov" type="video/mov" autoplay loop></video>
I got this to work with some jQuery, but was wondering if there is a CSS solution for this.
function resizeHandler() {
// scale the video
var documentHeight = $(document).height();
var documentWidth = $(document).width();
var ratio = $('#video').width() / $('#video').height();
if((documentWidth / documentHeight) < ratio) {
$('#video').css({
'width': 'auto',
'height': '100%',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginRight = $('#video').width() - $(document).width();
$('#video').css('left', -marginRight);
} else {
$('#video').css({
'width': '100%',
'height': 'auto',
'left': '0px',
'right': '0px',
'top': '0px',
'bottom': '0px'
})
var marginTop = $('#video').height() - $(document).height();
$('#video').css('top', -marginTop);
}
}
This is the jQuery I wrote to stretch the image to fit the screen, and to keep the image sort of centered.
Not sure if this is possible in CSS, but if somebody knows how to, this might be nice.

This question just have been referenced into Place video with 100% height & 100% width using css or javascript
I guess my answer for that could be the one you were looking for?
Here's the code:
header {
position: relative;
height: 100vh;
z-index: 0;
}
header h1 {
text-align: center;
font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
color: #fff
}
header video {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
<header>
<h1>Sample Title</h1>
<video autoplay loop class="bg-video">
<source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
</video>
</header>
And here's a working fiddle example.
Hope it'll help someone else :)

I would try centering the video with position absolute inside of a fixed wrapper. So for example:
Place your video inside of a fixed wrapper with 100% width and height:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Center the video inside of an extra large area with margin auto:
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
And stretch it to full size with min-width and min-height:
#video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
Here the final result:
#video-wrap {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#video {
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
<div id="video-wrap">
<video id="video" loop autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
Here also a jsfiddle.

This should make #video the entire size of the viewport and remain there when the user scrolls.
#video {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Use Css Property. object-fit: cover;
body, html {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
video {
height: 100%;
width: 100%;
}
<video controls>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>