Властивість z-index і плеєр youtube

Відео: Баг YouTube плеєра і z-index

Відео: Z-Index CSS Tutorial

У цій невеликій статті я розповім про одну особливість плеєра youtube, з якої мені довелося не так давно зіткнутися. У моє завдання входило зробити спливаюче вікно за допомогою блоку div, і воно повинно бути, зрозуміло, поверх всього контенту. Я поставив потрібний z-index на вікно, і воно стало поверх всього, за винятком плеєра youtube.

Виявилося, що за замовчуванням плеєр youtube ігнорує властивість z-index у будь-яких блоків, і даний плеєр завжди поверх всього. Вирішується ця проблема дуже просто. Треба всього лише додати ще один параметр всередину тега object, робиться це за допомогою звичайного тега param:

name="Wmode"value="Opaque"/ Gt;

Якщо ж у Вас плеєр вставляється через iframe, то тоді потрібно написати так:

Відео: Перекриття блоків. z-index HTML CSS

title="YouTube video player"width="480"height="390"src="Http://youtube.com/embed/111?wmode=transparent"frameborder="0"wmode="Opaque"gt;

Тобто знову ж додати параметр wmode = "opaque".

Відео: 45-css-te-z-index-konusunun-anlatilmasi

Все, після цього плеєр youtube почне враховувати властивість z-index. Сподіваюся, що кому-небудь ось така невелика хитрість допоможе у вирішенні проблем з z-index і плеєром youtube.

Поділися в соціальних мережах:

Схожі