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

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의 끝에 쿼리 ​​문자열로 표시 될 수있는 항목과 그렇지 않은 항목에 관계없이 보존되며 필요한 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>

The jQuery slighty adapted from the above answer...

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

Basically if you don't select Show suggested videos when the video finishes in your embed settings, you have a ?rel=0 at the end of your "src" url. So I've added the replace bit in case ?rel=0 exists. Otherwise ?wmode=transparent won't work.

---

We can simply add ?wmode=transparent to the end of YouTube URL. This will tell YouTube to include the video with the wmode set. So you new embed code will look like this:-

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

---

Only this one worked for me:

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

I load it in the footer.php Wordpress file. Code found in comment here (thanks Gerson)

---

wmode=opaque or transparent at the beginning of my query string didnt solve anything. This issue for me only occurs on Chrome, and not across even all computers. Just one cpu. It occurs in vimeo embeds as well, and possibly others.

My solution to to attach to the 'shown' and 'hidden' event of the bootstrap modals I am using, add a class which sets the iframe to 1x1 pixels, and remove the class when the modal closes. Seems like it works and is simple to implement.

---

The answers abow didnt really work for me, i had a click event on the wrapper and ie 7,8,9,10 ignored the z-index, so my fix was giving the wrapper a background-color and it all of a sudden worked. Al though it was suppose to be transparent, so i defined the wrapper with the background-color white, and then opacity 0.01, and now it works. I also have the functions above, so it could be a combination.

I dont know why it works, im just happy it does.

---

BigJacko's Javascript code worked for me, but in my case I first had to add some JQuery "noconflict" code. Here's the revised version that worked on my site:

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

---

All you need on the iframe is:

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

and in the URL:

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

참고URL : https://stackoverflow.com/questions/9074365/youtube-video-embedded-via-iframe-ignoring-z-index