Я пытаюсь заменить фоновую обложку в богатом html-файле (страница с сайта потокового видео с фоном обложки фильма) эквивалентностью видео. Были некоторые проблемы с подгонкой экрана, которые я решил с небольшими изменениями, но теперь проблема в том, что он становится слишком ярким (по-видимому, один из этих классов (tv-page-entity
) добавляет темный слой поверх фонового изображения, который теперь не виденНо я не смог сделать это в полноэкранном видео).
Как это исправить?
Это оригинальный фрагмент:
<tv-background-image class="style-scope tv-page-entity x-scope tv-background-image-0 loaded" style="background-image: url("./files/image.jpg")"></tv-background-image>
Вот мои изменения:
<style>
#myVideo {
position: relative;
min-width: 100%;
min-height: auto;
z-index: -10;
}
.fullscreen-bg::before {
position: relative;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
z-index: 1;
/* Any overlay color that you want, here I use black with 25% opacity */
background-color: rgba(0,0,0,0.8);
}
</style>
<tv-background-image id="myVideo" class="style-scope tv-page-entity x-scope tv-background-image-1 loaded">
<video id="myVideo" autoplay muted loop>
<source src="video/video.mp4" type="video/mp4">
</video>
</tv-background-image>
ЗДЕСЬ - это оригинальный html-файл, и мои измененияфайл.