наложить непрозрачный div поверх iframe на YouTube

110

Как я могу наложить 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;
}

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

html css iframe youtube overlay Тимо Хуовинен
источник

1

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

Timo Huovinen

1

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

scribu

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

Timo Huovinen

Наверное. В любом случае, решение anataliocs у меня сработало.

scribu

Можете ли вы добавить к этому вопросу тег youtube?

anataliocs

210

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

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

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

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

Попробуйте добавить этот параметр 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>

anataliocs
источник

1

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

Wacek

15

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

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

Не

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

Майк
источник

11

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

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

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

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

б) Найдите способ указать их на YouTube.

Медер Омуралиев
источник

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

Timo Huovinen,

отредактировал пример iframe, чтобы он выглядел так, как выглядит мой. jsfiddle.net/fdsaP/6

Тимо Хуовинен,

Итак ... вы хотите, чтобы прозрачность применялась к объекту / элементу вставки внутри iframe?

медер омуралиев

да, я не заметил, что iframe был наложен, потому что для меня объект покрывает весь iframe, мне нужно, чтобы видео было закрыто, если это возможно, иначе я заменю его черным div той же ширины / высоты и положения.

Тимо Хуовинен,

@meder спасибо за ссылку и решение! попробую прямо сейчас, но вспышка все еще активна :)

Тимо Хуовинен,

2

Я целый день возился с 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-index своего контейнера, чтобы ваш непрозрачный <div>объект находился перед iframe.

user605723
источник

0

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

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

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

Крис
источник

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

Timo Huovinen

1

Разве ты не этого хочешь?

Codebeef

Я пытаюсь разместить встроенное видео YouTube за непрозрачным фоном для полностью эстетических целей :)

Тимо Хуовинен,

наложить непрозрачный div поверх iframe на YouTube

Ответы: