I've got a landing page with a fullscreen width & height video background. Everything works fine. However, when I try to hide the video on mobile resolution using media queries, it doesn't hide at all.
I've tried enclosing the video in a div, and setting that div to display none. Didn't work either.
Does anyone have any idea how I could hide a background video for mobile devices?
Here's the main code.
HTML:
<div id="video_bg">
<video id="video_background" autoplay loop>
<source src="backgroundmovie.webm" type="video/webm" />
<source src="backgroundmovie.mp4" type="video/mp4" />
</video>
</div>
CSS:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
#media only screen and (max-width: 960px) {
#video_bg { display:none; }
#video_background { display:none; }
}
You can try #media only screen and (max-width: 960px) {#video_bg:display:none !important;} just to check weather it works or not.
EDIT
Or you can inherit the above tags and then do a display:none; like below.
#media only screen and (max-width: 960px) {
div#video_bg video#video_background source {display:none;}
}
Hope this helps.
Related
I'm trying to change the height of a certain div.
Somehow, the div gets a default height of 964px.
When I'm trying to change the height by using style: height:40vw; inside the div tag, it works just fine, but when I'm using the #media function without the style, it doesn't work.
I'm referring to the div with class and id of parent-container.
Here is my code:
HTML
<div class="content">
<div class="parent-container" id="parent-container" style="position: relative;top: 0;">
<div id="video-container"
style="z-index: -1; min-height: 100%;min-width: 100%; position: absolute; top: 0;left: 0; transition-delay: 500ms;overflow-y: hidden">
<video class="fade-in" autoplay loop muted
style="min-width:100%;max-height:100% ;position: fixed; left: 0; top: 0; object-fit: fill;">
<source id="mp4" src="images/video.mp4" type="video/mp4">
<p>Your user agent does not support the HTML5 video elemnt</p>
</video>
</div>
<div class="videoRGBA">
<img src="images/brush.png" style="position: relative; top: 15vw; left: 50px">
<div style="position: relative; top: 0.8vw;">
NOT RELEVANT
</div>
</div>
</div>
CSS
#media only screen and (min-width 427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width 0px) and (max-width 426px){
.parent-container{
height:90vw;
}
}
Thanks.
I missed ":" in the media query.
instead of
#media only screen and (min-width 427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width 0px) and (max-width 426px){
.parent-container{
height:90vw;
}
}
Just changed to:
#media only screen and (min-width :427px){
.parent-container{
height: 100vw;
}
}
#media only screen and (min-width: 0px) and (max-width: 426px){
.parent-container{
height:90vw;
}
}
Trying to create a corner radius video using a container.
Works great on any browser on desktop, and on mobile video is overflow the container.
.videoC {
width: 70vw;
height: auto;
margin-top: 2%;
margin-left: calc(15vw - 4px);
border-radius: 10vw;
border-style: solid;
border-color: white;
border-width: 8px;
overflow: hidden !important;
}
.video {
width: 100%;
height: auto;
object-fit: contain;
}
<div class="videoC">
<video class="video" loop="loop" muted autoplay defaultMuted playsinline oncontextmenu="return false;" src="xxx"></video>
</div>
on mobile iOS safari, the video corners overflow.
Turns out to be a Safari bug, solution, is it add this to the parent :
transform: translate3d(0, 0, 0);
and it worked.
you need to create a mobile version of your site.
you can use:
#media only screen and (max-width: 600px){
//
}
where:
#media is the css rule of css--
only screen and() is for set a "limit" of your rule
--max-width if for set the maximum width for your rule
I added youtube video in background but still it's not in full screen.
In left side and right side I'm still getting black background.
Here is my code:
<section class="banner-video">
<div class="banner-video-inner">
<iframe height="100%" width="100%" src="https://www.youtube.com/embed/<?php the_field('banner_video_link');?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</section>
.banner-video{position: relative; z-index: 0; width:100%; height:650px;}
.banner-video-inner{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; z-index: 2;}
I used the_field using advance custom field plugin.
so can anyone tell me how to show video in full screen and remove that left and right side black background ??
Apply video to video tag and add CSS from below code:
body {
margin: 0;
background: #000;
}
video {
position: fixed;
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;
}
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
.banner-video{position: relative; z-index: 0; width:100%; height:759px;}
#media only screen and (min-width:1400px){
.banner-video{height:843px;}
}
#media only screen and (min-width:1520px){
.banner-video{height:948px;}
}
#media only screen and (max-width:1199px){
.banner-video {height:576px;}
}
#media only screen and (max-width: 992px){
.banner-video {height:432px;}
}
#media only screen and (max-width: 640px){
.banner-video {height:318px;}
}
#media only screen and (max-width: 400px){
.banner-video {height: 180px;}
}
Finally This Works for me. Got the video in full screen.
Here's what's happening. I dont want my video to be full width. I want it a specific width. When I change the width the container sends the video to the left side. Then when I put in the middle it appears to be fine....until you zoom in and out and the div/container/wrapper moves the video.
How can I solve this?
How do I keep my video div/container/wrapper from moving when I zoom in and out?
The video is directly under the navigation bar so I'm sure it has something to do with the header's div/wrapper width. Please help.
HTML
-->
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'home-placeholder.jpg' | asset_url }}" width="100%">
<source src="{{ 'home.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'home.webm' | asset_url }}" type="video/webm">
<source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
Scroll Down
</div>
And CSS
div.video-background {
height: 100%;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 100%;
/*z-index: -1; */
margin-top:96px;
position:relative;
}
div.video-background video {
min-height: 100%;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.video-background .circle-overlay {
left: 50%;
margin-left: -590px;
position: absolute;
top: 120px;
}
div.video-background .ui-video-background {
display: none !important;
}
.index .sub-footer {
margin-top:0px;
}
I finally found an answer to this or a fix.
I tried three different things.
Setting different px values at different screen intervals
#media screen and (max-width: 1180px){
div.video-background video {
width:1000px;
}
}
#media screen and (max-width: 801px){
div.video-background video {
width:700px;
}
}
Also tried
width:auto;
Didn't do the trick.
I then tried em
#media screen and (max-width: 75em){
div.video-background video {
width:50em;
}
}
#media screen and (max-width: 65em){
div.video-background video {
width:30em;
}
}
Worked better but didn't solve it.
I finally tried vh setting width and height as vh
#media screen and (max-width: 1180px){
div.video-background video {
width:60vh;
height:60vh;
}
}
#media screen and (max-width: 801px){
div.video-background video {
width:40vh;
height:40vh;
}
}
And that fixed the issue. Please take these values with a grain of salt as they do not really represent the actual numbers I used. But hopefully this helps you in the future when dealing with browser zoom, overlapping elements, and moving divs.
So i used the method in this article: http://css-tricks.com/perfect-full-page-background-image/
here's the code i have:
css:
#bg {
height: auto;
left: 0;
min-height: 100%;
min-width: 1024px;
position: fixed;
top: 0;
z-index: -1;
width: 100%;
}
#media only screen
and (max-width : 1024px) {
#bg {
left: 50%;
margin-left: -512px;
}
html:
<img id="bg" src="breakfast.jpg">
this works for the most part except the height/width ratio in the mobile browser is messed up.
Edit you're media query like this:
#media only screen and (max-width : 1024px) {
#bg {
left: 50%;
margin-left: -512px;
min-height: 1px;
height: auto;
}
}
Going to answer my own question. In order for the background image to fill the page in mobile browser while maintaining the correct aspect ratio one must add a media query with a re-sized image for portrait / landscape mode.
Figured out the fix:
Needed to add
html {
height: 100%;
}