Chrome 및 IE9에 삽입된 YouTube 비디오 뒤에 내 드롭다운 메뉴가 나타나는 이유는 무엇입니까?

iframe을 통해 삽입된 YouTube 비디오 Z-색인을 무시하시겠습니까?

수평 다단계 드롭다운 탐색 메뉴를 만들려고 할 때 사용자가 다음과 같은 문제에 직면했습니다. Chrome 및 IE9에서 삽입된 YouTube 동영상 위에 드롭다운 메뉴가 표시되지 않는 예외적인 문제입니다(반면 Firefox에서는 작동함). 문제는 사용된 iframe 기술이 아니라 YouTube 동영상 자체에 국한되었습니다.

질문 1: 불일치 이유는 무엇입니까?

명시적으로 설정된 z-index:-999 !important; iframe의 경우 드롭다운 메뉴가 동영상 뒤에 가려져 있었습니다. 이는 YouTube 삽입 코드 내에 CSS 간섭이 있음을 나타냅니다.

질문 2: wmode 문제 해결

이 상황을 해결하려면 YouTube 삽입 코드에 wmode를 추가하면 문제가 해결되는 것 같습니다. 특히 다음 매개변수를 활용할 수 있습니다.

• &wmode=Opaque
• &wmode=transparent

이 솔루션이 작동하는 기술적 이유는 여전히 불분명합니다. 그러나 다음 코드 예제에서는 구현을 보여줍니다.

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

또는 다음 jQuery 코드를 배포하여 페이지의 모든 iframe에 대한 z-index 문제를 해결할 수 있습니다.

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

wmode 매개변수를 사용하면 YouTube 삽입 코드가 예상대로 작동하도록 맞춤화할 수 있어 모든 주요 브라우저에서 삽입된 동영상 위에 드롭다운 메뉴가 표시될 수 있습니다.

위 내용은 Chrome 및 IE9에 삽입된 YouTube 비디오 뒤에 내 드롭다운 메뉴가 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!