2011-11-26 23 views
19

Tôi có phần tử iframe youtube trong trang web của mình, nhưng nó nằm bên cạnh các mục menu của tôi. Khi tôi di chuột qua một mục trình đơn, một menu phụ sẽ mở ra một phần bao gồm khung nội tuyến (vì vị trí của nó, đó không phải là chức năng cụ thể rõ ràng). Điều này làm việc tốt trong Firefox, nhưng như thường lệ, nó không có trong IE, ở đây khung nội tuyến bao gồm trình đơn, làm cho nó về cơ bản không thể đọc được. Có một tùy chọn tôi cần phải thêm vào khung nội tuyến để làm cho nó hoạt động hoặc là nó chỉ đơn giản là không thể?Làm cách nào để tôi có thể làm cho iframe tôn trọng z-index trong IE?

(Thử nghiệm với IE9 tại thời điểm này)

+0

Cố gắng sử dụng http://www.youtube.com/embed/ liên kết video_id nhưng không phải http://www.youtube.com/v/video_id đó là vấn đề trong trường hợp của tôi. Nhúng nên được sử dụng, nhưng không được sử dụng, nhưng không phải V. – Spirit

Trả lời

46

Hãy thử sử dụng phương pháp nhúng iframe Youtubes (nếu thats không phải những gì bạn đã làm, và thêm: wmode = trong suốt đối với các url (thay thế với & nếu nó không phải là biến url đầu tiên)

+6

Nó hoạt động, hooray! – Valyrion

+2

FYI , iframe (hoặc một div chứa nó) cần một 'z-index' rõ ràng để làm việc này. – joescii

+0

Thêm wmode = transparent làm việc tuyệt vời, cảm ơn bạn rất nhiều! – Migs

27

Có một số vấn đề với câu hỏi này. Trước hết, không có vấn đề gì trong IE để đặt iframe ở trên hoặc bên dưới nội dung khác trong tài liệu của bạn bằng cách sử dụng chỉ mục z. Chỉ số z cao hơn làm cho khung nội tuyến của bạn phía trên các phần tử khác, (như thường lệ), theo như iframe của bạn được định vị: tương đối, tuyệt đối hoặc cố định.

Sự cố thực sự xảy ra khi nội dung của khung nội tuyến của bạn là đối tượng được nhúng flash. Trong trường hợp này, đối tượng flash chỉ có thể được định vị z nếu thông số wmode của nó được đặt thành "trong suốt" hoặc "mờ", nhưng nó sẽ không hoạt động nếu flash được bao gồm trong tài liệu HTML sử dụng wmode = "window".

Vì vậy, nếu bạn bao gồm tài nguyên bên ngoài (trong một trang web mà bạn không có quyền truy cập, như youtube), bạn chỉ có thể đạt được nếu có bất kỳ chế độ nào được sử dụng. Nếu bạn đang tải đối tượng flash trong khung nội tuyến mà bạn có thể sửa đổi nội dung của nó, chỉ cần kiểm tra xem:

<param name="wmode" value="transparent" /> 

được đặt.

Trong trường hợp youtube đang sử dụng chế độ "cửa sổ", bạn luôn có thể sử dụng trình phát flash của riêng mình và móc video youtube động, đặt chế độ đối tượng flash thành trong suốt.

+7

+1 để giải thích vấn đề thực tế là gì – Valyrion

+0

Bạn có thể giúp tôi bằng cách cung cấp câu trả lời cho khung nội tuyến có pdf trong đó không (tôi đang sử dụng Foxit Reader): ( –

0

tôi? thấy vấn đề tương tự, mặc định youtube liên kết từ nên nhúng,

<iframe src="http://www.youtube.com/embed/video_id"></iframe> 

nhưng không chỉ v-link (v-link bỏ qua z-index):

<iframe src="http://www.youtube.com/v/video_id" frameborder="0"></iframe> 

Dưới đây là một ví dụ cho IE: http://jsfiddle.net/7fd8Y/21/

0

Dưới đây là một giải pháp không tinh khiết JS, thay thế cho JQuery:

var iFramesOnPage = document.getElementsByTagName("IFRAME"); 
for(var i = 0; i < iFramesOnPage.length; i++) { 
    var newiFrameURL = iFramesOnPage[i].getAttribute("src")+"?wmode=transparent"; 
    iFramesOnPage[i].setAttribute("src", newiFrameURL); 
}; 
Các vấn đề liên quan