YouTube iframe 포함 동영상 위에 반투명 불투명도로 div를 오버레이하려면 어떻게해야합니까?
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>
CSS
#overlay {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
opacity:0.8;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
편집 (더 많은 설명 추가) :
HTML5가 우리에게 다가오고 있습니다. 플래시 대신 사용하는 장치가 점점 더 많아 져서 YouTube 동영상 삽입이 복잡해집니다. 고맙게도 YouTube는 모든 동영상 삽입 호환성 문제를 처리하는 특수 삽입 가능한 iFrame을 제공합니다. 이제는 반투명 div로 비디오 객체를 오버레이하는 이전 작업 방법이 더 이상 유효하지 않습니다. <param name="wmode" value="transparent">
이제 iFrame이므로 객체에을 추가 할 수 없습니다 . 따라서 위에 불투명 div를 추가하려면 어떻게해야합니까? iframe 임베디드 비디오?
답변
문제는 YouTube 링크를 삽입 할 때입니다.
https://www.youtube.com/embed/kRvL6K8SEgY
iFrame에서 기본 wmode는 기본적으로 다른 모든 것보다 더 큰 Z- 색인을 제공하고 모든 항목 위에 오버레이됩니다.
이 GET 매개 변수를 URL에 추가해보십시오.
wmode = 불투명
이렇게 :
https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque
URL의 첫 번째 매개 변수인지 확인하십시오. 다른 매개 변수는 다음에 가야합니다.
iframe 태그에서 :
예:
<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
답변
wmode = transparent 수정은 첫 번째 경우에만 작동합니다.
http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0
아니
http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
답변
흠 … 이번에는 뭐가 달라요? http://jsfiddle.net/fdsaP/2/
Chrome에서 잘 렌더링됩니다. 크로스 브라우저가 필요합니까? 구체적으로하는 데 정말 도움이됩니다.
편집 : 유튜브는 렌더링 object
과 embed
는 오버레이 수단 “창”에 그것을 기본값을 의미하는 명시적인 W 모드 세트 다 . 다음 중 하나가 필요합니다.
a) 개체 / 삽입 코드가 포함 된 페이지를 직접 호스팅하고 wmode = “transparent”param 요소를 개체에 추가하고 두 요소를 모두 제공하도록 선택한 경우 포함 할 속성을 추가합니다.
b) 유튜브가 그것들을 지정할 방법을 찾으십시오.
답변
나는 anataliocs 팁을 찾기 전에 CSS로 하루를 보냈습니다. wmode=transparent
YouTube URL에 매개 변수로 추가 :
<iframe title=<your frame title goes here>
src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"
scrolling="no"
frameborder="0"
width="640"
height="390"
style="border:none;">
</iframe>
이렇게하면 iframe이 컨테이너의 Z- 색인을 상속 <div>
할 수 있으므로 불투명도 가 iframe 앞에있게됩니다.
답변
미적 목적을위한 불투명 오버레이입니까?
그렇다면 다음을 사용할 수 있습니다.
#overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
background: #000;
pointer-events: none;
opacity: 0.8;
color: #fff;
}
‘pointer-events : none’은 오버레이 동작을 변경하여 물리적으로 불투명 할 수 있도록합니다. 물론 이것은 좋은 브라우저에서만 작동합니다.