YouTube wideo osadzone przez iframe ignorując z-index?

odpowiedź Joshc była na dobrej drodze, ale odkryłem, że całkowicie usuwa ?rel=0 querystring i zastępuje go pozycją ?wmode=transparent - która ma efekt wyświetlania listy sugerowanych Filmów na YouTube na końcu odtwarzania, mimo że pierwotnie nie chciałeś, aby tak się stało.

Zmieniłem kod tak, że atrybut src osadzonego wideo jest skanowany jako pierwszy, aby sprawdzić, czy nie ma już w nim znaku zapytania ? (ponieważ oznacza to obecność z wcześniej istniejącego ciągu zapytań, który Może być czymś w rodzaju ?rel=0, ale teoretycznie może być wszystkim, co YouTube zdecyduje się dołączyć w przyszłości). Jeśli istnieje już ciąg zapytania, chcemy go zachować, a nie zniszczyć, ponieważ reprezentuje ustawienie wybrane przez tego, kto wkleił ten film na YouTube, i prawdopodobnie wybrał go z jakiegoś powodu!

Więc, jeśli ? zostanie znaleziony, wmode=transparent zostanie dołączony przy użyciu formatu: &mode=transparent, aby po prostu oznaczyć go na końcu wcześniej istniejącego ciąg zapytania.

Jeśli nie znaleziono ?, kod będzie działał dokładnie tak samo jak pierwotnie (w postu toomanyairmiles), dodając tylko ?wmode=transparent jako nowy ciąg zapytania do adresu URL.

Teraz, niezależnie od tego, co może lub nie musi znajdować się na końcu adresu URL YouTube jako ciąg zapytania, zostaje on zachowany, a wymagane parametry wmode są wstrzykiwane lub dodawane bez uszkodzenia tego, co było wcześniej.

Oto kod do wrzucenia do twojego document.ready funkcja:

$('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"
    });
  }
});

Wystarczy dodać jeden z tych dwóch do 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>

Mam ten sam problem na YouTube iframe osadza tylko w Internet explorer choć.

Z-index został całkowicie zignorowany, lub flash video po prostu pojawiał się na najwyższym możliwym indeksie.

Tego właśnie użyłem, lekko dostosowując powyższy skrypt jquery.

Mój kod embed, prosto z YouTube...

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

JQuery slighty zaadaptowane z powyższej odpowiedzi...

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

Zasadniczo jeśli nie wybierz Pokaż sugerowane Filmy gdy film zakończy się w Ustawieniach osadzania, masz ?rel=0 na końcu adresu URL "src". Dodałem bit replace w przypadku, gdy ?rel=0 istnieje. W przeciwnym razie ?wmode=transparent nie zadziała.

Możemy po prostu dodać ?wmode=transparent na końcu adresu URL YouTube. To powie YouTube, aby dołączyć film z zestawem wmode. Więc nowy kod osadzania będzie wyglądał tak:-

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

Tylko ten mi pomógł:

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

Ładuję go w stopce.plik php Wordpress. Kod znaleziony w komentarzu tutaj (dzięki Gerson)

Wmode=nieprzezroczysty lub przezroczysty na początku łańcucha moich zapytań niczego nie rozwiązał. Ten problem dla mnie występuje tylko na Chrome, a nie na wszystkich komputerach. Tylko jeden procesor. Występuje również w osadzeniach vimeo i ewentualnie innych.

Moje rozwiązanie, aby dołączyć do zdarzenia "pokazane" i "ukryte" modali bootstrap, których używam, dodać klasę, która ustawia ramkę iframe na 1x1 pikseli i usunąć klasę, gdy modal zostanie zamknięty. Wydaje się, że działa i jest prosty w realizacji.

Odpowiedzi abow naprawdę nie działa dla mnie, miałem Zdarzenie kliknięcia na wrapper i ie 7,8,9,10 zignorował Indeks z, więc moja poprawka dawała wrapper kolor tła i to wszystko nagle zadziałało. Al chociaż miał być przezroczysty, więc zdefiniowałem wrapper z tłem-kolor biały, a potem nieprzezroczystość 0.01, i teraz działa. Mam również powyższe funkcje, więc może to być kombinacja.

Nie wiem dlaczego to działa, jestem po prostu szczęśliwy, że tak.

Kod Javascript BigJacko zadziałał dla mnie, ale w moim przypadku najpierw musiałem dodać trochę kodu jQuery "noconflict". Oto poprawiona wersja, która działała na mojej stronie:

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

Wszystko czego potrzebujesz na iframe to:

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

Oraz w URL:

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