首頁 > web前端 > css教學 > 主體

為什麼下拉選單中的 YouTube iframe 在不同瀏覽器中呈現不同的效果?

Barbara Streisand
發布: 2024-11-05 05:38:02
原創
790 人瀏覽過

Why do YouTube iframes in dropdown menus render differently in different browsers?

嵌入在iframe 中的YouTube 影片在某些瀏覽器中忽略z-index

透過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-index 主導地位,允許下拉式選單和其他元素在其上方正確呈現。

以上是為什麼下拉選單中的 YouTube iframe 在不同瀏覽器中呈現不同的效果?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板