Наложение непрозрачного div над youtube iframe

Как я могу наложить div с полупрозрачной непрозрачностью над встроенным видеоизображением iframe iframe?

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ" frameborder="0"></iframe>
<div id="overlay"></div>

CSS

#overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#000;
    opacity:0.8;
    /*background:rgba(255,255,255,0.8); or just this*/
    z-index:50;
    color:#fff;
}

изменить (добавлено уточнение): HTML5 приближается к нам, все больше и больше устройств, которые используют его вместо flash, что усложняет встраивание видео YouTube, к счастью, youtube предоставляет специальный встраиваемый iFrame с обработкой всех проблем совместимости с встраиванием видео, но теперь ранее используемый метод наложения видео объект с полупрозрачным div больше не действителен, теперь я не могу добавить объект <param name="wmode" value="transparent"> к объекту, потому что теперь он является iFrame, поэтому как добавить непрозрачный div поверх встроенного видео iframe

Ответ 1

Информация с официального сайта Adobe об этой проблеме

Проблема заключается в том, что вы вставляете ссылку на YouTube:

https://www.youtube.com/embed/kRvL6K8SEgY

в iFrame, по умолчанию используется wmode, который по существу дает ему z-индекс больше, чем все остальное, и он накладывается на что-либо.

Попробуйте добавить этот параметр GET к URL-адресу:

= Режим окно непрозрачной

так:

https://www.youtube.com/embed/kRvL6K8SEgY?wmode=opaque

Убедитесь, что в URL указан первый параметр. Другие параметры должны идти после

В теге iframe:

Пример:

<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY_lvKIQ?wmode=opaque" frameborder="0"></iframe>

Ответ 2

Обратите внимание, что wmode = прозрачное исправление работает, если оно сначала так

http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent&rel=0

Не

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent

Ответ 3

~~Хм... что на этот раз другое? http://jsfiddle.net/fdsaP/2/~~

Окраска в Chrome отлично. Вам нужен кросс-браузер? Это действительно помогает быть конкретным.

EDIT: Youtube отображает object и embed без явного набора wmode, что означает, что по умолчанию он имеет значение "окно", что означает, что он накладывает все. Вам нужно либо:

a) Соберите страницу, которая содержит код объекта/вставки, и добавьте wmode = "transparent" элемент param в объект и атрибут для вставки, если вы решили обслуживать оба элемента

b) Найдите способ для youtube, чтобы указать их.

Ответ 4

Я потратил целый день на использование CSS, прежде чем нашел подсказку anataliocs. Добавьте wmode=transparent в качестве параметра URL-адреса YouTube:

<iframe title=<your frame title goes here> 
    src="http://www.youtube.com/embed/K3j9taoTd0E?wmode=transparent"  
    scrolling="no" 
    frameborder="0" 
    width="640" 
    height="390" 
    style="border:none;">
</iframe>

Это позволяет iframe наследовать z-индекс своего контейнера, поэтому ваш непрозрачный <div> будет перед iframe.

Ответ 5

Является ли непрозрачное наложение для эстетических целей?

Если это так, вы можете использовать:

#overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        background: #000;
        pointer-events: none;
        opacity: 0.8;
        color: #fff;
}

'pointer-events: none' изменяет поведение наложения, так что оно может быть физически непрозрачным. Конечно, это будет работать только в хороших браузерах.