i- 프레임을 통한 YouTube 비디오 내장 z- 인덱스를 무시 하시겠습니까?

수평 다단계 드롭 다운 탐색 메뉴를 구현하려고합니다. 메뉴 바로 아래 (수직)에는 iframe을 통해 YouTube 동영상이 포함되어 있습니다. Firefox에서 기본 수준 탐색 항목 중 하나를 가리키면 드롭 다운 메뉴가 비디오 위에 올바르게 나타납니다 .

그러나 Chrome과 IE9에서는 메뉴와 iframe 사이의 작은 공간 영역에서 드롭 다운의 은색 만 보입니다. 나머지 는 iframe 뒤에 있는 것 같습니다 .

문제 는 iframe이 아니라 YouTube 동영상과 관련이있는 것 같습니다 . 테스트하기 위해 iframe을 비디오가 아닌 다른 웹 사이트를 목표로 삼았으며 IE에서도 드롭 다운 메뉴가 제대로 작동했습니다.

• 질문 1 : WTF?
• 질문 2 : 왜 z-index:-999 !important; iframe을 명시 적으로 넣 더라도이 문제가 계속 발생합니까?

YouTube 내장 코드에 포함 된 내부 CSS가 있습니까?

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">

아니면 이거

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

Joshc 의 대답은 올바른 궤도에 있었지만 ?rel=0쿼리 문자열을 완전히 삭제하고 ?wmode=transparent항목으로 대체 한다는 것을 알았습니다. 이는 원래 재생하지 않아도 재생이 끝날 때 YouTube 추천 동영상 목록을 표시하는 효과가 있습니다. 이 일이 일어나길 원하지 않습니다.

그래서 나는 코드를 변경 src임베디드 비디오의 속성은 물음표가 있는지 먼저 스캔 ?이 기존의 쿼리 문자열의 존재 의미하기 때문에 (이미 거기에 수 같은 수 ?rel=0있지만, 이론적으로 수를 앞으로 YouTube에서 추가하기로 선택한 것). 검색어 문자열이 이미있는 경우 YouTube 동영상에 붙여 넣은 사람이 선택한 설정을 나타내며이를 이유로 이유를 선택했기 때문에 삭제하지 않고 보존하려고합니다.

따라서 ?찾은 경우 wmode=transparent: &mode=transparent는 기존 형식의 쿼리 문자열 끝에 태그를 지정 하는 형식 : 을 사용하여 추가됩니다 .

?발견 되지 않으면 코드는 URL에 새 쿼리 문자열로 추가 되어 원래와 동일한 방식으로 ( toomanyairmiles 의 게시물에서) 작동 ?wmode=transparent합니다.

이제 YouTube URL의 끝에 쿼리 ​​문자열로 표시 될 수있는 항목과 그렇지 않은 항목에 관계없이이 URL은 유지되며 필요한 wmode매개 변수가 이전에 있던 항목에 영향을주지 않고 삽입되거나 추가됩니다.

document.ready함수에 포함 시킬 코드는 다음과 같습니다 .

$('iframe').each(function() {
  var url = $(this).attr("src");
  if (url.indexOf("?") > 0) {
    $(this).attr({
      "src" : url + "&wmode=transparent",
      "wmode" : "opaque"
    });
  }
  else {
    $(this).attr({
      "src" : url + "?wmode=transparent",
      "wmode" : "opaque"
    });
  }
});

다음 두 가지 중 하나를 src URL에 추가하십시오.

&wmode=Opaque

&wmode=transparent

<iframe id="videoIframe" width="500" height="281" src="http://www.youtube.com/embed/xxxxxx?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

그래도 인터넷 탐색기에서만 YouTube iframe 임베드에 동일한 문제가 있습니다.

Z- 색인을 완전히 무시했거나 플래시 비디오가 가장 높은 색인으로 나타납니다.

이것은 위의 jquery 스크립트를 약간 수정하여 사용한 것입니다.

YouTube에서 바로 내 소스 코드 ...

<iframe width="560" height="315" src="http://www.youtube.com/embed/QldZiR9eQ_0?rel=0" frameborder="0" allowfullscreen></iframe>

위의 답변에서 jQuery가 약간 수정되었습니다 ...

$('iframe').each( function() {
    var url = $(this).attr("src")
    $(this).attr({
        "src" : url.replace('?rel=0', '')+"?wmode=transparent",
        "wmode" : "Opaque"
    })
});

기본적으로 포함 설정에서 동영상이 끝났을 때 추천 동영상 표시를 선택하지 않으면 URL ?rel=0끝에가 있습니다 "src". 경우에 따라 교체 비트를 추가했습니다 ?rel=0. 그렇지 않으면 ?wmode=transparent작동하지 않습니다.

?wmode=transparentYouTube URL 끝에 간단히 추가 할 수 있습니다 . 이렇게하면 wmode가 설정된 비디오가 YouTube에 포함됩니다. 따라서 새로운 임베드 코드는 다음과 같습니다.

<iframe width="420" height="315" src="http://www.youtube.com/embed/C4I84Gy-cPI?wmode=transparent" frameborder="0" allowfullscreen>

이 중 하나만이 나를 위해 일했습니다.

<script type="text/javascript">
var frames = document.getElementsByTagName("iframe");
    for (var i = 0; i < frames.length; i++) {
        src = frames[i].src;
        if (src.indexOf('embed') != -1) {
        if (src.indexOf('?') != -1) {
            frames[i].src += "&wmode=transparent";
        } else {
            frames[i].src += "?wmode=transparent";
        }
    }
}
</script>

footer.php Wordpress 파일에로드합니다. 주석 에서 발견 된 코드 (Gerson에게 감사드립니다)

내 쿼리 문자열의 시작 부분에서 wmode = opaque 또는 transparent로 아무것도 해결되지 않았습니다. 이 문제는 Chrome에서만 발생하며 일부 컴퓨터에서도 발생하지 않습니다. 단 하나의 CPU. 그것은 vimeo embed 및 다른 것들에서도 발생합니다.

내가 사용하는 부트 스트랩 모달의 '표시 된'및 '숨겨진'이벤트에 연결하고 iframe을 1x1 픽셀로 설정하는 클래스를 추가하고 모달이 닫힐 때 클래스를 제거하는 솔루션. 작동하는 것처럼 보이고 구현하기가 쉽습니다.

대답 abow는 실제로 나를 위해 작동하지 않았습니다. 래퍼에 클릭 이벤트가 있었고 7,8,9,10은 z- 인덱스를 무시 했으므로 래퍼에 배경색을 주었고 갑자기 작동했습니다. . 비록 투명하다고 가정했지만 래퍼를 배경색 흰색으로 정의 한 다음 불투명도 0.01로 정의하면 이제 작동합니다. 위의 기능도 있으므로 조합이 될 수 있습니다.

나는 그것이 왜 작동하는지 모르겠다.

BigJacko의 Javascript 코드는 저에게 효과적이지만 제 경우에는 먼저 JQuery "noconflict"코드를 추가해야했습니다. 내 사이트에서 작동하는 수정 된 버전은 다음과 같습니다.

<script type="text/javascript">
var $j = jQuery.noConflict(); 
jQuery(document).ready(function($j){
  $j('iframe').each(function() {
    var url = $j(this).attr("src");
      if ($j(this).attr("src").indexOf("?") > 0) {
        $j(this).attr({
          "src" : url + "&wmode=transparent",
          "wmode" : "Opaque"
        });
      }
      else {
        $j(this).attr({
          "src" : url + "?wmode=transparent",
           "wmode" : "Opaque"
        });
      }
   });
});
</script>

iframe에 필요한 것은 다음과 같습니다.

...wmode="opaque"></iframe>

그리고 URL에서 :

http://www.youtube.com/embed/123?wmode=transparent