youtube iframe 위에 불투명 div 오버레이

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 임베디드 비디오?

이 문제에 대한 공식 Adobe 사이트의 정보

문제는 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=transparentYouTube 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'은 오버레이 동작을 변경하여 물리적으로 불투명 할 수 있도록합니다. 물론 이것은 좋은 브라우저에서만 작동합니다.