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%;
}
}
Related
My css for Iframe:
position: absolute;
right: 0;
top: -100px;
z-index: 1;
height: 110%;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
This is my CSS for Iframe screen on my website, but in mobile devices, I have to scroll the Iframe screen to see the full website.
Note: making the iframe responsive is not in my hand.
The bootstrap method. Use an iframe or video element in it.
<div class="embed-16by9">
<iframe src="..."></iframe>
</div>
with responsive css
embed-16by9 {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-16by9::before {
display: block;
content: "";
padding-top: 56.25%; /* ratio 16:9 */
}
.embed-16by9 iframe,
.embed-16by9 video {
width: 100%;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 100%;
}
Can anyone help me? mix blend is affecting my nav bar and a picture of the shoe. I want to bring them to the front. I tried with z-axis but it doesn't work.
<section>
<img src="slike/bg.jpg" id="bg">
<img src="slike/moon.png" id="moon">
<img src="slike/mountain.png" id="mountain">
<img src="slike/road.png" id="road">
<img src="slike/road.png" id="road">
<img src="slike/Untitled-1.png" id="shoe">
<h1 id="text">AIRMAX</h1>
</section>
section{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
section:before{
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #0a2a43, transparent);
z-index: 10000;
}
section:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #0a2a43;
z-index: 10000;
mix-blend-mode: color;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
#text{
position: relative;
color: #fff;
font-size: 10em;
z-index: 2;
text-align: center;
padding: 100px;
font-family: 'Nunito', sans-serif;
}
#road{
z-index: 2;
}
I made a parallax effect, so I have 5 images stacked on top of each other with mix blend mode. The sixth picture "untitled-1" should be on top of this blend mode. I don't know if this is possible so I came here for help. The blend mode is also affecting my nav bar but the nav bur is outside of the section that has bland mode on it.
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>
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;
I'm having a strange issue over at a new site I just created (http://segarsmedia.com/motor-city-rising/). Problem is when you first visit it, you're greeted with a large play button and a poster image from the video I'm presenting coming from YouTube. Click it and a div goes over that spot, along with an close button. So far, so good.
However, if you click the close button and then try to play the video again, the video appears and starts to play, but it now appears underneath the poster image and play button and it's about 1/5 the original size. It seems to now be playing outside of its' intended container although when in inspector, the code doesn't seem to show that. It also doesn't seem to add any additional inline styles as well.
Obviously, I want the video to appear where it first appears when you click on the play button. So why is this occurring instead?
I have a Pen up at http://codepen.io/anon/pen/NdMqya and here's the code.
HTML
<div class="entry-content">
<div id="video-mask"></div>
<a class="vidjmp" id="show" href="#"><div class="play"><img src="http://segarsmedia.com/wp-content/themes/auth-story/img/play.png" alt="play" title="play"></div>
<img width="1920" height="1080" src="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg" class="attachment-full size-full wp-post-image" alt="Motor City Rising" srcset="http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising.jpg 1920w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-300x169.jpg 300w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-768x432.jpg 768w, http://segarsmedia.com/wp-content/uploads/2017/01/hero-motor-city-rising-1024x576.jpg 1024w" sizes="(max-width: 1920px) 100vw, 1920px" /></a>
<div id="video-content" class="video-content">
<a id="video-close" href="#"><div id="close" class="close">X</div></a>
<div class="video-container">
<iframe id="video-iframe" width="" height="" src="http://www.youtube.com/embed/75pCxGDkuNQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div><!-- .entry-content -->
CSS
.entry-content:before,
.entry-content:after {
content: "";
display: table;
table-layout: fixed;
}
.entry-content:after, {
clear: both;
}
.entry-content {
position: relative;
display: block;
margin: 0;
width: 100%;
}
.play {
width: 125px;
height: 125px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -62.5px;
margin-top: -62.5px;
z-index: 205;
}
#video-content {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
.video-container {
position: relative;
padding-bottom:56.25%;
padding-top: 0;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#close {
background: #000;
color: #FFF;
display: block;
position: absolute;
top: 16px;
left: 24px;
height: 48px;
width: 48px;
border-radius: 24px;
z-index: 2000;
font-size: 24px;
line-height: 1;
font-weight: 700;
padding: 14px 16px;
border-radius: 24px;
z-index: 2000;
}
#media screen and (max-width: 677px) {
.play {
width: 62.5px;
height: 62.5px;
margin-left: -31.25px;
margin-top: -31.25px;
}
#close {
height: 30px;
border-radius: 15px;
font-size: 15px;
padding: 7px 10px;
width: 30px;
border-radius: 15px;
}
}
JS
<script type="text/javascript">
jQuery(document).ready(function() {
var iframeSrc = jQuery('#video-iframe').attr("src");
jQuery('a.vidjmp').click(function(e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc + '?rel=0&autoplay=1&showinfo=0&modestbranding=0');
jQuery('#video-mask').fadeTo(500,0.9, function(){
jQuery('#video-content').fadeIn(500, function(){
jQuery('#video-iframe').show();
});
});
});
// Close Modal/Mask
jQuery('#video-close, #video-mask').click(function (e) {
e.preventDefault();
jQuery('#video-iframe').attr("src", iframeSrc);
jQuery('#video-mask, #video-content').fadeOut(0, function(){
var vidCopy = jQuery('#video-iframe').clone();
jQuery('#video-iframe').detach();
jQuery(vidCopy).appendTo('#video-content');
});
});
});
</script>
Found the problem. It was a simple case of CSS:
#video-iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}