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
Post a Comment