Vấn đề về chỉ mục z-CSS CSS của FF3/Windows với trình phát YouTube

Question

Tôi bị kẹt trên những gì dường như là xung đột CSS/z-index với trình phát YouTube. Trong Firefox 3 trong Windows XP, hãy xem trang này: http://spokenword.org/program/21396 Nhấp vào nút Thu thập và lưu ý rằng cửa sổ bật lên < div> xuất hiện dưới trình phát YouTube. Trên các trình duyệt khác, < div> xuất hiện ở trên cùng. Nó có giá trị z-index là 999999. Tôi đã thử thiết lập chỉ mục z của phần tử < đối tượng chứa trình phát có giá trị thấp hơn, nhưng điều đó không hoạt động. Bất kỳ ý tưởng làm thế nào để có được các cửa sổ pop-up xuất hiện trên máy nghe nhạc?

Answer 1

Cố gắng thêm tham số wmode là opaque như thế này:

(Lưu ý rằng nó bao gồm trong cả thẻ <param>và một thuộc tính wmode trên thẻ <embed>.)

<object width='425' height='344'> 
    <param name='movie' value='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1'> 
    <param name='type' value='application/x-shockwave-flash'> 
    <param name='allowfullscreen' value='true'> 
    <param name='allowscriptaccess' value='always'> 
    <param name="wmode" value="opaque" /> 
    <embed width='425' height='344' 
      src='http://www.youtube.com/v/Wj_JNwNbETA&hl=en&fs=1' 
      type='application/x-shockwave-flash' 
      allowfullscreen='true' 
      allowscriptaccess='always' 
      wmode="opaque" 
    ></embed> 
    </object> 

Answer 2

Chúng tôi sử dụng jQuery Flash plugin để chuyển đổi các liên kết YouTube sang phim Flash. Trong trường hợp này, wmode được thông qua như là một tùy chọn để có được các video trên YouTube xuất hiện bên dưới jQuery Dialog chúng tôi mở:

$('a[href^="http://www.youtube.com"]').flash(
    { width: nnn, height: nnn, wmode: 'opaque' } 
); 

Answer 3

tôi đã tìm thấy một chức năng tinh khiết JS mà sửa chữa nó trong tất cả các trình duyệt!

có bạn đi:

function fix_flash() { 
    // loop through every embed tag on the site 
    var embeds = document.getElementsByTagName('embed'); 
    for (i = 0; i < embeds.length; i++) { 
     embed = embeds[i]; 
     var new_embed; 
     // everything but Firefox & Konqueror 
     if (embed.outerHTML) { 
      var html = embed.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/wmode\s*=\s*('|")[a-zA-Z]+('|")/i)) 
       new_embed = html.replace(/wmode\s*=\s*('|")window('|")/i, "wmode='transparent'"); 
      // add a new wmode parameter 
      else 
       new_embed = html.replace(/<embed\s/i, "<embed wmode='transparent' "); 
      // replace the old embed object with the fixed version 
      embed.insertAdjacentHTML('beforeBegin', new_embed); 
      embed.parentNode.removeChild(embed); 
     } else { 
      // cloneNode is buggy in some versions of Safari & Opera, but works fine in FF 
      new_embed = embed.cloneNode(true); 
      if (!new_embed.getAttribute('wmode') || new_embed.getAttribute('wmode').toLowerCase() == 'window') 
       new_embed.setAttribute('wmode', 'transparent'); 
      embed.parentNode.replaceChild(new_embed, embed); 
     } 
    } 
    // loop through every object tag on the site 
    var objects = document.getElementsByTagName('object'); 
    for (i = 0; i < objects.length; i++) { 
     object = objects[i]; 
     var new_object; 
     // object is an IE specific tag so we can use outerHTML here 
     if (object.outerHTML) { 
      var html = object.outerHTML; 
      // replace an existing wmode parameter 
      if (html.match(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")[a-zA-Z]+('|")\s*\/?\>/i)) 
       new_object = html.replace(/<param\s+name\s*=\s*('|")wmode('|")\s+value\s*=\s*('|")window('|")\s*\/?\>/i, "<param name='wmode' value='transparent' />"); 
      // add a new wmode parameter 
      else 
       new_object = html.replace(/<\/object\>/i, "<param name='wmode' value='transparent' />\n</object>"); 
      // loop through each of the param tags 
      var children = object.childNodes; 
      for (j = 0; j < children.length; j++) { 
       try { 
        if (children[j] != null) { 
         var theName = children[j].getAttribute('name'); 
         if (theName != null && theName.match(/flashvars/i)) { 
          new_object = new_object.replace(/<param\s+name\s*=\s*('|")flashvars('|")\s+value\s*=\s*('|")[^'"]*('|")\s*\/?\>/i, "<param name='flashvars' value='" + children[j].getAttribute('value') + "' />"); 
         } 
        } 
       } 
       catch (err) { 
       } 
      } 
      // replace the old embed object with the fixed versiony 
      object.insertAdjacentHTML('beforeBegin', new_object); 
      object.parentNode.removeChild(object); 
     } 
    } 
} 

bây giờ bạn chỉ có thể chạy trong khi tải trang với jQuery:

$(document).ready(function() { 
      fix_flash();  
}); 

Answer 4

mặc dù khuyến cáo bởi CMS là hợp lệ, có một bản cập nhật quan trọng. Nếu bạn muốn sử dụng 'khung nội tuyến' thay vì 'nhúng', chỉ cần thêm ?wmode=transparent vào liên kết video của bạn và điều đó thực hiện phép thuật. Tôi thấy điều này đơn giản và sạch sẽ hơn.

Cập nhật, Tháng 2014

Nó được một lúc và điều này có thể bị lỗi thời.

Ai đó đã báo cáo rằng bây giờ &wmode=transparent hoạt động thay thế.

Answer 5

Tôi nhận thấy rằng wmode = "opaque" ảnh hưởng rất lớn đến việc sử dụng CPU. Chrome làm cho máy tính xách tay của tôi sử dụng CPU 50% (không có opaque ~ 8%).
Vì vậy, hãy cẩn thận với tùy chọn này.