YouTube 동영상 삽입 및 Z-색인 문제

다단계 드롭다운 탐색 메뉴 아래에 iframe을 사용하여 YouTube 동영상을 삽입할 때 다음과 같은 문제가 발생할 수 있습니다. Chrome 및 Internet Explorer에서 동영상 뒤에 드롭다운 메뉴가 나타나는 문제. 기본 탐색 항목 위로 마우스를 가져가면 드롭다운이 모든 브라우저에서 동영상 상단에 나타나야 합니다.

질문 1: Chrome 및 IE9에서 YouTube 동영상 뒤에 드롭다운 메뉴가 나타나는 이유는 무엇입니까?

이 문제는 iframe이 아닌 YouTube 동영상 자체와 관련된 문제입니다. YouTube 삽입에는 Z-색인 값을 포함하여 다른 CSS 설정을 재정의하는 내부 CSS가 포함되어 있습니다.

질문 2: z-index:-999 !important 설정이 왜 중요한가요? iframe에서 여전히 문제가 발생합니까?

YouTube 삽입 코드에서 우선 적용되는 CSS가 iframe에 적용하는 모든 Z-색인 설정보다 우선합니다.

해결책:

이 문제를 해결하려면 삽입된 동영상의 URL:

&wmode=Opaque

이 설정을 사용하면 비디오가 배경과 혼합되어 페이지의 다른 요소가 그 위에 나타날 수 있습니다.

추가 참고 사항:

• 불투명 대신 wmode=transparent 매개변수를 사용할 수도 있습니다. 단, 이로 인해 투명도 문제가 발생할 수 있습니다. 일부 브라우저.
• 또는 아래 코드 조각에 표시된 대로 jQuery를 사용하여 페이지에 있는 모든 iframe의 URL을 로드하기 전에 수정할 수 있습니다.

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url "?wmode=transparent");
    });
});