YouTube 비디오 삽입이 웹 페이지의 Z-색인을 재정의하는 이유는 무엇입니까?

YouTube Video Embeds Override z-index

iframe을 통해 YouTube 동영상을 삽입하면 웹페이지에서 예상치 못한 동작이 발생할 수 있습니다. 특히 공유 요소의 경우에는 더욱 그렇습니다. 동일한 수직 공간. Internet Explorer(IE9) 및 Chrome과 같은 특정 브라우저에서는 비디오 위에 렌더링된 드롭다운 또는 기타 요소가 iframe 뒤에 부분적으로 숨겨져 나타날 수 있습니다.

왜 이런 일이 발생합니까?

이 동작은 iframe 자체로 인해 직접 발생하는 것이 아니라 YouTube가 삽입 코드에 포함하는 내부 CSS 스타일로 인해 발생합니다. 이 스타일은 iframe에 설정된 z-index 속성을 재정의하므로 동영상 삽입이 페이지의 다른 요소보다 더 높은 스택 순서를 갖게 됩니다.

해결책: wmode 매개변수 추가

이 문제를 해결하려면 값이 "opaque" 또는 "transparent"인 wmode 매개변수를 추가하여 삽입 코드를 수정하면 됩니다. 이는 YouTube가 내부 CSS 스타일을 비활성화하고 iframe의 z-index를 존중하도록 지시합니다.

wmode를 사용한 삽입 코드 예:

<code class="html"><iframe title="YouTube video player" width="480" height="390"
src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent"
frameborder="0">
</iframe></code>

대안 해결 방법: JavaScript

또는 JavaScript를 사용하여 페이지의 모든 iframe에 wmode 매개변수를 동적으로 추가할 수 있습니다. 예시 스니펫은 다음과 같습니다.

<code class="javascript">$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});</code>

위 내용은 YouTube 비디오 삽입이 웹 페이지의 Z-색인을 재정의하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!