내 드롭다운 메뉴가 YouTube Iframe 아래에 나타나는 이유는 무엇입니까?

YouTube 비디오 방해 드롭다운 메뉴: wmode를 구출하세요

개발자는 YouTube 비디오를 웹 페이지에 통합해야 하는 문제에 자주 직면합니다. 특이한 경우로 사용자들은 드롭다운 메뉴가 YouTube iframe을 제대로 오버레이하지 못하고 그 아래에 나타나는 실망스러운 동작을 보고했습니다. 이 문제는 Chrome 및 IE9와 같은 브라우저에서 나타났지만 Firefox는 영향을 받지 않습니다.

이 이상 현상으로 인해 의아해하는 사람은 명시적으로 -999 !important로 설정된 z-index 속성이 문제를 해결하지 못하는 이유를 궁금해할 수 있습니다. 문제. YouTube 삽입 코드 내의 내부 CSS가 사용자 정의 설정을 재정의할 수 있습니까?

이 수수께끼의 문제에 대한 해결책은 YouTube iframe 코드에 wmode 매개변수를 추가하는 것입니다. src URL에 &wmode=opaque 또는 &wmode=transparent를 추가하면 드롭다운 메뉴의 동작이 복원됩니다. 이 수정 사항에 대한 포괄적인 기술 설명은 아직 파악하기 어렵지만 Z-색인 충돌을 효과적으로 해결합니다.

수정된 iframe 코드의 예는 다음과 같습니다.

<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에 wmode 매개변수를 자동으로 추가합니다.

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

이 간단한 솔루션을 구현하면 개발자는 YouTube iframe 위에 드롭다운 메뉴가 방해 없이 오버레이되어 원활한 사용자 환경을 보장할 수 있습니다.

위 내용은 내 드롭다운 메뉴가 YouTube Iframe 아래에 나타나는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!