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>

HTML: Show transparent cover on image and video

I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.
Here is my code:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?

I think you are looking for something like this:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>

All you need is a wrapper:
.media-cover {
display: inline-block;
position: relative;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #6b478fb3;
opacity: 0;
}
.media-cover:hover:after {
opacity: 1;
}
<div class="media-cover">
your media object here...
</div>
Here's an example with the media objects centered in a full screen parent:
.media-cover {
position: relative;
display: inline-block;
}
.center-me {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 15%;
border-bottom: 1px solid #eee;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; /*delete this line to disable interaction with video/picture */
background-color: #6b478fb3;
opacity: 0;
transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
display: block;
max-width: 100%;
}
.media-cover:hover:after {
opacity: 1;
}
picture img {
max-width: 100%;
display: block;
}
body {margin: 0;}
<div class="center-me">
<div class="media-cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
</div>
<div class="center-me">
<div class="media-cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</div>

Video elements should be treated as images, where they can't have unrelated children elements. Also, you should be able to make the hover event by just using pure css like so:
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
I made it work how you might have intended here:
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<div class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<video controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>

CSS Style: Video-js - center and text-align: center; is not working

i don't know wher is the problem here in my video or in the css code?
<center>
<div class="video-js-responsive-container vjs-hd">
<video id="myvideo" class="video-js vjs-default-skin vjs-big-play-centered" controls
preload="auto" data-setup="{}">
<source src="<?php echo $linkdown?>" type='video/mp4' width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
<source poster="<?php echo $posterimg; ?>">
</video>
</div>
</center>
i can't remove this css beaucose i need this css code!maybe it should be modified?
<style>
.video-js-responsive-container.vjs-hd {
padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
padding-top: 75%;
}
.video-js-responsive-container {
width: 100%;
position: relative;
}
.video-js-responsive-container .video-js {
height: 75%;
width: 75%;
position: absolute;
top: 0%;
left: 0%;
}
body{
background-color:#f2f2f2;
}
</style>

Try doing this:
.video-js-responsive-container .video-js {
height: 75%;
width: 50%;
position: relative;
top: 0%;
left: 0%;
}

Try specifying top and left of the inner element to 25% / 2 = 12.5%:
.video-js-responsive-container .video-js {
height: 75%;
width: 75%;
position: absolute;
top: 12.5%;
left: 12.5%;
}

**this was the correct code CSS, I found it after three hours **
<style>
.video-js-responsive-container.vjs-hd {
padding-top: 35.50%;
}
.video-js-responsive-container.vjs-sd {
padding-top: 55%;
}
.video-js-responsive-container {
width: 75%;
position: relative;
}
.video-js-responsive-container .video-js {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
body{
background-color:#f2f2f2;
}
</style>

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;

Place video with 100% height & 100% width using css or javascript

I want to place a html5 video (with the video tag of course) with 100% width and 100% height which will play in the background. Here is an example with an image and I want exactly the same with a video, I just didn't find out how to do that:
#image {
background-image: url("image.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
JSFiddle: http://jsfiddle.net/u9ncpyfu/

You may try:
header {
position: relative;
background-size: cover;
background-position: 50% 50%;
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>
It will keep the aspect ratio and the video centered while always fully covering the container.
Here's a fiddle working example.
Hope it helps :)

If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
This may need to be adjusted for responsiveness.
Check out this jsfiddle.
Edit:
If you also want the video to remain centered, then wrap it in a container like so:
#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">
<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.

Set
top: 0;
left: 0;
right: 0;
bottom: 0;
You can forget about height: 100%, it only stretches to contain 100% of a div's interior content.

Easy if you give the HTML and BODY a height of 100%.
WORKING JSFIDDLE DEMO
html,
body {
height: 100%;
overflow: hidden;
}
* {
margin: 0;
padding: 0;
}
video {
height: 100%;
width: 100%;
}
<video controls>
<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>