У меня есть background-color: (0,0,0,1) , нужно сделать несколько дырок в нем(а сзади видео) (дырки должны быть вместо слов). Как я могу это сделать?

##Так вот, получается на фоне играет видео бесконечно, мне нужно сделать так, что-бы за место тегов (span class="exception_word") были пустые окошки , типа текста нет и соответственно background-color тоже отсутствует. А моя проблема заключается в том что это НЕ РАБОТАЕТ, любыми способами пытался убрать background-color у этих span объектов и все без толку.##

body {
    margin: 0;
    padding: 0;
}

.div_video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.black_blckgrnd {
    height: 100%;
    width: 100%;
    position: absolute;
}

.main_text {
    margin: 0px;
    height: 100%;
    width: 100%;
    font-size: 60px;
    color: white;
    background-color: rgba(0, 0, 0, 0.432);
    overflow: hidden;
}


.exception_word {
opacity: 0;
background: transparent;   

}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>task_2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="div_video">
    <video autoplay loop>
        <source src="videos/video_1.mp4" type="video/mp4">
        Ваш браузер не поддерживает video.
    </video>
    </div>


    <!--Text-->
    <div class="black_blckgrnd">
        <p class="main_text">
            Lorem ipsum, 
            <span class="exception_word">dolor</span>  sit amet consectetur adipisicing elit. Natus non 
            <span class="exception_word">explicabo</span> laborum cum, sed possimus animi corrupti error
            <span class="exception_word">tempore</span>
             quae
        </p>
    </div>


    <script src="main.js"></script>
</body>
</html>

Результат который мне нужен (оранжевое это видео)


Ответы (0 шт):