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