미디어 쿼리를 사용하여 HTML5 동영상 숨기기

전체 화면 너비가 & 인 방문 페이지가 있습니다. 모든 것이 잘 작동합니다. 그러나 미디어 쿼리를 사용하여 모바일 해상도로 비디오를 숨기려고해도 전혀 숨기지 않습니다.미디어 쿼리를 사용하여 HTML5 동영상 숨기기

div에 비디오를 포함하고 해당 div를 표시하지 않도록 설정했습니다. 어느 쪽도 일하지 않았다.

모바일 장치 용 배경 비디오를 숨길 수있는 사람이 있습니까?

다음은 주요 코드입니다.

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; } 
}

출처

2013-05-14 Jefferson

작동하는 것 같습니다 (http://jsfiddle.net/8D9HF/). exakt 문제는 어디에 있습니까? 모바일 장치가 미디어 쿼리를 지원하지 않을 수 있습니까? – algorhythm

당신은 @media only screen and (max-width: 960px) {#video_bg:display:none !important;} 그냥 작동 여부 날씨를 확인하기 위해 시도 할 수 있습니다.

편집

아니면 다음 위의 태그를 상속 할 수는 다음과 같은 display:none;을한다.

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

희망이 있습니다.

출처

2013-05-14 11:51:10 Nitesh

왜'! important'를 포함 시켰습니까? – samayo

! important는 #video_bg에 영향을 줄 수있는 다른 모든 코드를 재정의합니다. 그럴 수 없다. – Jefferson

날씨를 CSS에 알기 위해 포함 시켰습니다. 아무 것도 표시하지 못하도록 보호하는 무언가가 계승 된 경우입니다. - @phpNoOb – Nitesh

미디어 쿼리를 사용하여 HTML5 동영상 숨기기

답변

관련 문제