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

Быстрый ответ

Чтобы применить непрозрачный слой к iframe YouTube, установите над ним div, у которого фон задан через свойство background, например, rgba(0, 0, 0, 0.5) для достижения 50%-ной непрозрачности. Поменяйте позиционирование на абсолютное и задайте z-index, чтобы слой был расположен сверху. Размеры видео и слоя должны совпадать:

<div style="position: relative; width: 560px; height: 315px;">
  
  <iframe style="position: absolute; width: 100%; height: 100%;"
          src="https://www.youtube.com/embed/VIDEO_ID?wmode=opaque" frameborder="0" allowfullscreen>
  </iframe>
  <!-- Непрозрачный слой -->
  <div style="position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; 
              background: rgba(0, 0, 0, 0.5);">
  </div>

</div>

Измените значений rgba для достижения нужной степени непрозрачности и замените VIDEO_ID на требуемый идентификатор видео. Так вы сможете создать эффект затенения видеоконтента.

Повышение совместимости

Современные методы встраивания видео имеют свои особенности, связанные с оконным режимом, поэтому добавление параметра wmode=opaque к URL iframe может улучшить взаимодействие накладываемого слоя с другими элементами. Параметры в URL следует располагать именно в такой последовательности, как показано ниже:

https://www.youtube.com/embed/VIDEO_ID?wmode=opaque&rel=0

• Параметр ?wmode=opaque помогает слою корректно отображаться, не позволяя содержимому iframe всплывать над другими элементами.
• Опция &rel=0 позволит убрать рекомендуемые видео после окончания воспроизведения.

Улучшение iframe и доступности

Для создания более доступного контента рекомендуется использовать атрибут title для всех iframe, а также описывать их содержимое. Добавьте scrolling="no" и frameborder="0", чтобы у интерфейса был чистый и незаметный вид:

<iframe title="Описательный заголовок видео YouTube" scrolling="no" frameborder="0"></iframe>

Стилизуйте iframe с помощью CSS для гармоничного внедрения в дизайн вашего сайта или приложения.

Визуализация

Воспринимайте это как фокус с исчезновением: если iframe с YouTube — это кролик, то непрозрачный div — шляпа волшебника:

Кролик (iframe YouTube): 🐇
Шляпа волшебника (Непрозрачный Div): 🎩

Когда кролик скрыт под шляпой:

До: 🐇 (Кролика видно)
После: 🎩 (Кролик скрыт, вот это фокус!)

Смысл этого — перенаправить внимание зрителя с видео на контент, который вы хотите подчеркнуть.

Разбор HTML5 и CSS в деталях

Возможности wmode не ограничены, и будет полезно изучить API полноэкранного режима HTML5, а также попрактиковаться с CSS-режимами наложения для достижения более выразительного эффекта наложения.

Владение искусством z-index

Важно знать контекст наложения при использовании z-index. Для видимости накладываемого слоя div значение z-index должно быть больше, чем у iframe:

.overlay {
  z-index: 10; /* Больше, чем у iframe. Важно не абсолютное значение, а его превосходство */
}

Подробнее об этом расскажет наш спикер на видео

Преодоление специфики браузеров

Иногда слой может отображаться неадекватно из-за особенностей браузера или ошибок в CSS. Следует стремиться к единообразию взаимодействия в разных браузерах и разрабатывать альтернативные стратегии или полифиллы для устранения конкретных проблем.

Управление событиями указателя

Если вы хотите, чтобы накладываемый div действовал как мантия-невидимка, воспользуйтесь свойством pointer-events:

.overlay {
  pointer-events: none; /* Сначала visible, потом invisible! */
}

Имейте в виду, что это может повлиять на взаимодействие пользователя с видео в iframe.

Полезные материалы

1. position – CSS: Cascading Style Sheets | MDN — всё о позиционировании в CSS.
2. Как создать наложение | W3Schools — пошаговая инструкция по созданию наложения для видео.
3. css – How to put div over youtube iframe video? – Stack Overflow — практичные советы по решению проблем с z-index в iframes YouTube.
4. Что вам не говорили о z-index — Philip Walton — полное руководство по z-index и контекстам наложения.
5. Iframe Sandbox | web.dev — о безопасности и лучших практиках при работе с iframes.
6. CSS Blending Modes: A Comprehensive Guide | CSS-Tricks — глубокое знакомство с режимами наложения CSS.
7. "css-pointer-events" | Can I use — о совместимости браузеров со свойством pointer-events.