YouTube IFrame 위에 반투명 Div를 오버레이하는 방법은 무엇입니까?

YouTube iFrame에 불투명 Div 삽입

YouTube iframe 동영상 위에 반투명 div를 오버레이하는 것은 HTML5 및 그에 따른 비디오 개체를 iFrame으로 대체합니다. "wmode" 매개변수를 사용하여 배경 투명도를 추가하는 표준 방법은 더 이상 적용할 수 없습니다.

다행히도 YouTube에서는 개발자가 iframe URL에 "wmode=opaque" 매개변수를 추가할 수 있도록 허용하여 솔루션을 제공합니다. 이 매개변수는 iframe에 더 낮은 Z-색인을 할당하여 iframe의 다른 요소와 오버레이될 수 있도록 합니다. 페이지.

HTML

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>
<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 50;
    color: #fff;
}

설명:

• iframe URL에는 다음이 포함됩니다. iframe이 div에 의해 오버레이되도록 하는 "wmode=opaque" 매개변수.
• div는 "fixed" 속성을 사용하여 위치를 지정하고 전체 화면("상단: 0", "왼쪽: 0)에 걸쳐 있습니다. ", "너비: 100%" 및 "높이: 100%").
• "배경:을 사용하여 반투명 배경이 div에 적용됩니다. rgba(0, 0, 0, 0.8)". 두 번째 및 세 번째 값(0, 0)을 조정하여 오버레이 색상을 변경합니다.
• div의 Z-색인은 50으로 설정되어 iframe 위, 페이지의 다른 콘텐츠 아래에 배치됩니다. .