드롭다운 메뉴의 YouTube iframe이 브라우저마다 다르게 렌더링되는 이유는 무엇입니까?

iframe에 삽입된 YouTube 동영상은 특정 브라우저에서 Z-색인을 무시합니다.

iframe을 통해 아래에 삽입된 YouTube 동영상이 있는 다단계 드롭다운 탐색 메뉴는 특정 웹에서 렌더링 문제를 일으켰습니다. 브라우저. Firefox에서는 드롭다운 메뉴가 동영상 상단에 표시되지만 Chrome과 IE9에서는 일부만 표시됩니다.

놀랍게도 범인은 iframe이 아니라 YouTube 동영상 자체에 있습니다. iframe을 다른 외부 웹사이트로 타겟팅하면 IE에서도 드롭다운 메뉴가 제대로 표시됩니다. 이는 YouTube 삽입 코드에 문제가 있을 수 있음을 나타냅니다.

전문가는 두 가지 값을 갖는 wmode 매개변수를 통합할 것을 권장합니다.

• 불투명
• 투명

효과를 설명하는 제한된 문서에도 불구하고 아래 예에서 볼 수 있듯이 이 매개변수를 비디오의 URL에 추가하면 문제가 해결됩니다.

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

또는 jQuery 스크립트를 사용하여 다음을 수행할 수도 있습니다. 페이지의 모든 iframe 수정:

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

이 접근 방식은 YouTube 동영상의 Z-색인 지배력을 성공적으로 취소하여 드롭다운 메뉴 및 기타 요소가 그 위에 올바르게 렌더링되도록 합니다.

위 내용은 드롭다운 메뉴의 YouTube iframe이 브라우저마다 다르게 렌더링되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!