Исправить YouTube IFrame Overlay и Z-Index

По умолчанию код для вставки, который предлагает YouTube выглядит следующим образом:

<iframe title="YouTube video player" src="http://www.youtube.com/embed/lZqrG1bdGtg" frameborder="0" width="640" height="390"></iframe>

Немного его модифицируем и получим желанный результатос:

<iframe title="YouTube video player" src="http://www.youtube.com/embed/lZqrG1bdGtg?wmode=opaque" frameborder="0" width="640" height="390"></iframe>

Мы просто добавили небольшой фрагмент «?wmode=opaque» в конец URL-адреса и все прекрасно заработало.

Если, вдруг, этот финт не сработает в Chrome, попробуйте прописать wmode=transparent вместо wmode=opaque.

Для любителей JQuery можно использовать сей кодик:

$(document).ready(function () {
	$('iframe').each(function() {
		var url = $(this).attr("src");
		$(this).attr("src",url+"?wmode=opaque");
	});
});

Ну и бывает нужно вставить просто ссылку на видео, тогда добавим параметр в строку:
было:

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0

стало:

http://www.youtube.com/watch?v=1YmPooYpyQw?rel=0&wmode=opaque

В общем, как-то так 🙂


Один комментарий для “Исправить YouTube IFrame Overlay и Z-Index”

Оставьте комментарий