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;
Related
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>
I need to create a div with video. That video should be full screen height in desktop and mobile, it should be in it's exact width and height ( not full screen height ). Here my code for desktop but i can't do anything in mobile. Can you help me with css, please. Thanks.
You can also check this link
HTML:
<header id="header-container" role="banner">
<div class="top-image test-top"></div>
<div id="header-video-container" class="zoom">
<img id="header-fallback" src="yourimage.jpg" alt="" />
<video id="header-video" controls autoplay loop muted pauseinline width="1280" height="720" role="img">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />
</video>
</div>
<a id="play-pause" class="hover-anim" aria-hidden="true"><i class="fas fa-pause"></i></a>
</header>
js:
var playPauseBtn = document.getElementById("play-pause");
var player = document.getElementById("header-video");
player.removeAttribute("controls");
playPauseBtn.onclick = function() {
if (player.paused) {
player.play();
this.innerHTML = '<i class="fas fa-pause"></i>';
} else {
player.pause();
this.innerHTML = '<i class="fas fa-play"></i>';
}
};
CSS:
#header-container {
position: relative;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
/*z-index: -500;*/
}
#header-container video,
#header-fallback {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#header-video-container:after {
/* video texture overlay - set to 1 z-index above video */
content: "";
background-image: url(../media/img/video-overlay-dot-large.png);
background-size: 3px 3px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* header video pause button */
#play-pause {
/*background-color: #50A1CB; /* button color */
color: white; /* text/arrow color */
/*display: none;*/
z-index: 999;
/* float in bottom right corner */
/* 20 pixels from edge */
position: absolute;
right: 50px;
top: 50%;
/* size of button is 50 pixels*/
width: 50px;
height: 50px;
opacity: 0.5;
transition: 0.6s all;
}
#play-pause:hover {
opacity: 1;
}
a#play-pause {
line-height: 50px;
text-decoration: none;
font-weight: 600;
font-size: 3em;
text-align: center;
}
In addition to Niraj's answer, you can set the height to auto to push the video back up to the top which I'm guessing is what you want.
#media screen and (max-width: 500px) {
#header-container video, #header-fallback {
width: 100%;
height: auto;
}
}
Additionally, CSS has no way of detecting what a 'mobile device' is but we can use media queries to change content based on screen size. You can edit the 500px value based on whatever you feel is best for your site.
You can use media query as following
#media only screen and (max-width: 768px) {
/* For mobile phones: */
#header-container video {
width: 100%;
}
}
I want a HTML video tag to fill my card. Like this:
<ion-card>
<ion-card-header>
<ion-card-title>Ion Videp</ion-card-title>
</ion-card-header>
<div class="video-wrapper">
<video #video controls="controls" class="video" autoplay="autoplay">
<source src="../../../assets/push-ups.mp4" type="video/mp4" />
</video>
</div>
</ion-card>
But the Video just keeps the original size.
I tried these css styles:
.video-wrapper {
position: relative;
height: 200px;
}
.video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
But it still won't work.
Any Ideas?
.video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100vw; /* you can changes size*/
min-height: 100vh;
z-index: -100;
background-size: cover;
overflow: hidden;
}
For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
Display wrapper to display: table, change child element to display: table-cell, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP
I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}
simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
display:table;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
display:table-cell;
vertical-align:middle;
text-align: center;
color: white;
}
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div>
<!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div>
<!-- header-container -->
</body>
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>