Блог

Главная - Вопросы по программированию - Как показать div с элементами управления в полноэкранном iframe

Как показать div с элементами управления в полноэкранном iframe

#z-index #fullscreen

#z-индекс #полноэкранный режим

Вопрос:

Я хочу показать кнопку закрытия / отмены на полноэкранном видео YouTube, но iframe youtube video имеет z-индекс 2147483647 , и я также установил тот же z-индекс для своего div, но он не отображается над iframe.

Вот мой код : 

 <body>
...
// some other content
...
<div id="custom_button">close</div>
// iframe
</body>

Я использовал приведенный ниже код для полноэкранного iframe :

 var requestFullScreen = iframe.requestFullScreen || iframe.mozRequestFullScreen || iframe.webkitRequestFullScreen;
if (requestFullScreen)
{
    requestFullScreen.bind(iframe)();
}

И я установил css для custom_button : 

 z-index: 2147483647;
position: absolute;
top: 30%;
right: 1%;
color: #fff;
cursor: pointer;
width: 50px;
height: 50px;

Но он не отображается над полноэкранным iframe.

Как это сделать?

Комментарии:

1. z-индекс должен быть выше, чем тот, который у вас есть для iframe. Не равно. Таким образом, вы избегаете проверки, какой элемент отображается первым.

2. Я также пробовал с более высоким z-индексом, но не работает.

3. Есть прогресс в этом?