html - hide HTML5 video using media query -


i've got landing page fullscreen width & height video background. works fine. however, when try hide video on mobile resolution using media queries, doesn't hide @ all.

i've tried enclosing video in div, , setting div display none. didn't work either.

does have idea how hide background video mobile devices?

here's 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 screen , (max-width: 960px) {     #video_bg { display:none; }     #video_background { display:none; } } 

you can try @media screen , (max-width: 960px) {#video_bg:display:none !important;} check weather works or not.

edit

or can inherit above tags , display:none; below.

@media screen , (max-width: 960px) {     div#video_bg video#video_background source {display:none;}     } 

hope helps.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -