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

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

<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 приближается к нам, и все больше и больше устройств используют его вместо флэш-памяти, что усложняет встраивание видео на YouTube. К счастью, YouTube предоставляет специальный встраиваемый iFrame, который решает все проблемы совместимости встраивания видео, но Теперь ранее работающий метод наложения видеообъекта с полупрозрачным div больше не действителен, теперь я не могу добавить <param name="wmode" value="transparent"> к объекту, потому что теперь это iFrame, так как мне добавить непрозрачный div поверх встроенного видео iframe?

Источник

5 ответов

Решение

Information from the Official Adobe site about this issue

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

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

in an iFrame, the default wmode is windowed which essentially gives it a z-index greater then everything else and it will overlay over anything.

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

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

вот так:

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

Make sure its the first parameter in the URL. Other parameters must go after

В теге 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>
Источник

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

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

Не

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
Источник

Хм... а что отличается на этот раз? http://jsfiddle.net/fdsaP/2/

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

РЕДАКТИРОВАТЬ: Youtube оказывает object а также embed без явного указания wmode, что означает, что по умолчанию используется "окно", что означает, что оно перекрывает все. Вам нужно либо:


а) Разместите страницу, содержащую код объекта / встраивания, самостоятельно и добавьте элемент paramo wmode="transparent" к объекту и атрибут для встраивания, если вы решите использовать оба элемента

б) Найти способ для YouTube, чтобы определить их.


Источник

Я потратил целый день на 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.

Источник

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

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

#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' изменит поведение наложения, чтобы оно могло быть физически непрозрачным. Конечно, это будет работать только в хороших браузерах.

Источник
Другие вопросы по тегам