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

108

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

источник

2010-09-29 Timo Huovinen

Похоже YouTube полностью исправило проблему. –

Я все еще вижу проблему в Chrome. – scribu

@scribu это могут быть проблемы с флэш-памятью или я что-то упустил, я протестировал на локальном сервере. –

210

Information from the Official Adobe site about this issue

Вопрос в том, когда вы вставляете ссылку YouTube:

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

в качестве плавающего фрейма, режим окна по умолчанию оконный, который по существу придает ему г-индекс больше, то все остальное, и это будет накладывать на что-либо.

Try добавляя этот параметр 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>

источник

2011-01-24 22:38:10 anataliocs

Это должно быть wmode = opaque. – ybakos

Информация от Adobe о проблеме: [http://kb2.adobe.com/cps/155/tn_15523.html](http://kb2.adobe.com/cps/155/tn_15523.html). Только для записи. – Wacek

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

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

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

а) Хост-страницу, которая содержит код объекта/EMBED себя и добавить WMODE = «прозрачный» PARAM элемент объекта и атрибута вставлять, если вы выбираете для обслуживания обоих элементов

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

источник

2010-09-29 09:37:41

Да, я выяснил, в чем проблема: в firefox и chrome он работает с обычным фоном, добавив, что непрозрачность заставляет его сиять ... ваше тоже сияет. –

отредактировал пример iframe, чтобы посмотреть, как выглядит мой взгляд. http://jsfiddle.net/fdsaP/6/ –

Итак, вы хотите, чтобы непрозрачность применялась к элементу/встроенному элементу внутри 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; 
}

«указатель события: None» изменит поведение наложения так, что он может быть физически непрозрачным. Конечно, это будет работать только в хороших браузерах.

источник

2010-09-29 09:48:19 Chris

safari 4, chrome и firefox3.6 все еще щелкает через ?? –

Разве это не то, что вы хотите? – Codebeef

Я пытаюсь разместить встроенное видео 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.

источник

2011-02-06 22:50:37 user605723

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

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

Не

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

источник

2011-03-01 22:11:15 Mike

спасибо за подсказку –

это простейшее решение ... работающий .. thankyou +1 –

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

ответ

Смежные вопросы