Чтобы предотвратить наложение текста на видео YouTube, можно использовать CSS-свойство z-index. Z-index устанавливает порядок отображения элементов и позволяет контролировать, какие элементы расположены перед другими элементами на веб-странице.
В случае с текстом, который накладывается на видео YouTube, мы можем применить следующий подход:
1. Создайте контейнер для видео YouTube и текста. Назовем его "video-container".
<div class="video-container">
<!-- YouTube видео здесь -->
<iframe src="https://www.youtube.com/embed/ВИДЕО_ID" frameborder="0" allowfullscreen></iframe>
<!-- Текст под видео -->
<div class="text-container">
<p>Ваш текст здесь</p>
</div>
</div>
2. Определите стили для "video-container", "text-container" и видео YouTube.
.video-container {
position: relative; /* Установите относительное позиционирование */
width: 100%; /* Установите ширину */
height: 0; /* Установите высоту как 0 для соотношения сторон видео */
padding-bottom: 56.25%; /* Установите соотношение сторон видео */
overflow: hidden; /* Скрыть все, что выходит за пределы контейнера */
}
.video-container iframe {
position: absolute; /* Установите абсолютное позиционирование */
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text-container {
position: relative; /* Установите относительное позиционирование */
z-index: 1; /* Установите z-index больше, чем у видео, чтобы текст находился поверх */
background-color: rgba(0, 0, 0, 0.5); /* Установите фон, чтобы текст был виден */
padding: 10px;
color: #fff; /* Цвет текста */
}
В результате этих стилей, видео YouTube будет занимать всю ширину контейнера "video-container" и иметь высоту, основанную на соотношении сторон видео (обычно 16:9). Текст будет находиться внутри контейнера "text-container" и будет отображаться поверх видео благодаря свойству z-index.
Не забудьте заменить "ВИДЕО_ID" в атрибуте src iframe на фактический идентификатор видео YouTube, чтобы видео было вставлено. Также вы можете настроить стили в соответствии с вашими потребностями, задав цвет текста, фона и другие свойства.
Это примерная реализация, которая поможет вам избежать накладывания текста на видео YouTube.