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

как я могу наложить div с полупрозрачной непрозрачностью на встроенное видео youtube 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?

1019   5  

5 ответов:

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

проблема заключается в том, когда вы вставляете ссылку youtube:

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

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

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

параметром wmode=непрозрачный

вот так:

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>
211  
2012-05-30 20:55:31

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

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

не 

http://www.youtube.com/embed/K3j9taoTd0E?rel=0&wmode=transparent
15  
2011-03-02 00:11:15

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

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

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


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

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


10  
2014-02-17 21:31:39

Я провел день, возясь с 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> будет находиться в передней части кадра.

2  
2011-12-13 22:19:25

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

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

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

0  
2010-09-29 12:48:19

Comments

    Ничего не найдено.
Click here to cancel reply.