накладений непрозорий дів на кадр youtube 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 наближається до нас, де більше та більше пристроїв, які використовують його замість спалаху, що ускладнює вбудовування відео у YouTube, на щастя, youtube забезпечує спеціальний вбудований iFrame, який обробляє всі проблеми сумісності відео, але тепер раніше працюючий метод накладання відеооб'єкта напівпрозорим дівом вже не дійсний, я зараз не в змозі додати <param name="wmode" value="transparent">до об’єкта, тому що це тепер iFrame, тож як додати непрозорий div поверх відео із вбудованою рамкою iframe?

Інформація з офіційного сайту 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>

Зауважте, що виправлення wmode = прозоре працює лише тоді, коли спочатку так

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 відмінно. Вам потрібен крос-браузер? Це дійсно допомагає бути конкретним.

EDIT : Youtube надає objectі embedбез явного набору wmode, що означає, що він за замовчуванням "вікно", це означає, що він накладає все . Вам потрібно:

a) Розмістіть сторінку, яка містить об'єкт / код вбудовування, і додайте wmode = "прозорий" парам-елемент до об'єкта та атрибут для вбудовування, якщо ви вирішите обслуговувати обидва елементи

b) Знайдіть спосіб для youtube вказати їх.

Я провів день, возившись із CSS, перш ніж знайшов підказку анаталіоків. Додати 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' змінить поведінку накладення, щоб вона була фізично непрозорою. Звичайно, це буде працювати лише в хороших браузерах.