Sử dụng javascript với jQuery, tôi thêm một khung nội tuyến có url youtube để hiển thị video trên trang web, tuy nhiên mã nhúng được tải trong khung nội tuyến từ youtube không có wmode = "Opaque", do đó các hộp phương thức trên trang được hiển thị bên dưới video youtube.Youtube iframe wmode issue
Bất kỳ ý tưởng nào về cách giải quyết vấn đề?
Hãy thử thêm ?wmode=opaque vào URL hoặc &wmode=opaque nếu đã có thông số.
Nếu nó không hoạt động, hãy thử thay vào đó, &wmode=transparent cũng sẽ hoạt động trong trình duyệt IE.
đẹp!hoạt động trên firefox & chrome nhưng đối với một số lý do doesnt làm việc trên IE ... bất kỳ ý tưởng? – danfromisrael
thử sử dụng & wmode = transparent thay vì – Shabith
không hoạt động ... tôi cũng đã thử chơi với chỉ mục z không thành công ... – danfromisrael
Thử thêm ?wmode=transparent vào cuối URL. Đã làm cho tôi.
'Trong suốt' phải là tùy chọn ưa thích theo ý kiến của tôi. – Foxinni
Thêm ?wmode=opaque vào URL dường như giải quyết vấn đề này cho tôi, mặc dù tôi chưa thử nghiệm nó trong IE.
Đối với những người gặp khó khăn với giải pháp được đề xuất trước đó, hãy lưu ý rằng ký hiệu inital sẽ chỉ hoạt động nếu bạn đã cung cấp các đối số khác cho URL. Đối số đầu tiên phải có dấu hỏi ban đầu: http://www.example.com?first=foo&second=bar
Tôi bước đầu nhận được hình chữ nhật màu đen bất kể video tôi đang cố hiển thị .. hóa ra máy thử nghiệm không có đèn flash được cài đặt và hộp thoại cài đặt flash đã được bù đắp quá nhiều! – Zeb
Thêm &wmode=transparent vào url và bạn đã hoàn tất, được kiểm tra.
tôi sử dụng kỹ thuật mà trong wordpress của riêng tôi cắm YouTube shortcode
Kiểm tra mã nguồn của nó nếu bạn gặp bất kỳ vấn đề.
Thêm & wmode = transparent after the you tube URL Giải quyết vấn đề trên tất cả các trình duyệt. Cảm ơn ông Tubal, công việc tốt :) –
&wmode=opaque không hoạt động đối với tôi (chrome 10) nhưng &wmode=transparent đã xóa sự cố đó.
Nếu bạn đang sử dụng API không đồng bộ mới, bạn sẽ cần phải thêm tham số như sau:
<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
console.log("onYouTubePlayerAPIReady" + initialVideo);
player = new YT.Player('player', {
height: '381',
width: '681',
wmode: 'transparent', // SECRET SAUCE HERE
videoId: initialVideo,
playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
này được dựa trên các tài liệu google và ví dụ ở đây: http://code.google.com/apis/youtube/iframe_api_reference.html
Lưu ý rằng C ALNG này cần wmode trong playerVars. Khi nó nằm dưới YT.Player, nó sẽ chỉ hoạt động với trình phát HTML5. Thêm wmode vào playerVars cũng gửi tham số đó đến đối tượng Flash, có vấn đề z-order riêng của nó. Xem tại đây: https://groups.google.com/forum/?fromgroups#!topic/youtube-api-gdata/OQRG5rTKBFQ Tôi sẽ chỉnh sửa câu trả lời của bạn cho phù hợp. –
Tôi đã thử điều này và nó không hoạt động. Tôi cũng không tìm thấy bất kỳ tham chiếu đến wmode trong tài liệu của YouTude. – sboisse
Liên kết đã thay đổi kể từ khi tôi đăng lần đầu tiên, cũng như phương pháp thiết lập wmode. Bạn có thể đặt bất kỳ tham số flash nào ngay bây giờ hoặc tham số trình phát youtube thông qua playerVars. Tôi đã cập nhật ví dụ trên. –
Chỉ cần một mẹo ! - đảm bảo bạn tăng chỉ mục z trên phần tử bạn muốn trên video được nhúng. Tôi đã thêm chuỗi truy vấn wmode và nó vẫn không hoạt động ... cho đến khi tôi tăng chỉ số z của phần tử khác. :)
Tôi biết đây là một câu hỏi cũ, nhưng nó vẫn đi lên trong tìm kiếm hàng đầu cho vấn đề này vì vậy tôi thêm một câu trả lời mới để giúp những người tìm kiếm một cho IE:
Thêm &wmode=opaque để phần cuối của URL KHÔNG hoạt động trong IE 10 ...
Tuy nhiên, thêm ?wmode=opaque thực hiện thủ thuật!
Tìm thấy giải pháp này ở đây: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
'&' và '?' Đều chính xác tùy thuộc vào thứ tự chúng được sử dụng và cài đặt nào khác được bao gồm trong URL. Rõ ràng '?' Được sử dụng nếu đây là thiết lập đầu tiên (hoặc duy nhất), '&' ngược lại. – Alex
Có, nhưng IE có nhu cầu đặc biệt. Chỉ cần thử nó và xem những gì làm việc trong IE 10 và không. Tôi chưa thử điều này trong IE 11. –
thời gian gần đây tôi thấy rằng đôi khi flash player không nhận &wmode=opaque, istead bạn nên vượt qua &WMode=opaque quá (chú ý chữ hoa).
Đây có phải là sự cố không? Tôi đã sử dụng giải pháp này trước đây nhưng không thể tạo lại vấn đề ban đầu trong Chrome/Firefox/IE mới nhất. – marcovtwout