Czy jest jakiś sposób na blokowanie odtwarzania video ?

komponent z ReactPlayerem:

import '../style.css';
import React from 'react';
import ReactPlayer from 'react-player';

function VideoSection(){
    
    return(
        <section className="video-section">
           <div className="overlay"></div>
              <ReactPlayer url='upload/video.mp4' playing controls={false} width='100%' height='auto'/>
                 <div className="home-text-wrapper relative container">
                 <div className="home-message">
                 <p>To jest jakiś fajny tekst</p>
                 <small>To jest jeszcze inny tekst</small>
                 <div className="btn-wrapper">
                     <div className="text-center">
                        <a href="#oferta" className="btn btn-primary wow slideInLeft">Czytaj dalej</a> 
                     </div>
                 </div>
                    
                </div>
                
                </div>
            
            <div className="slider-bottom">
                <div id="oferta"></div>
                <span>Przeglądaj <div id="popularne"></div><i className="fa fa-angle-down"></i></span> 
            </div>
        </section>
    );
}
export default VideoSection;

style:

.video-section {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: url('../public/images/pattern.png') repeat center center rgba(0, 0, 0, 0.7);
}

I o co chodzi? Chodzi o to, że wideo się wyświetla, ale nie odtwarza filmu. Ten overlay to jest taka nakładka na film, żeby był ciemniejszy. Celowo też
wyłączyłem kontrolki bo ten film ma się odtwarzać od momentu otwarcia strony.
I pytanie, czy o czymś zapomniałem?

Wydaje mi się, że brakuje jeszcze odpowiednika atrybutu "mute" przy wideo bo przeglądarki obecnie nie odtwarzają automatyczne wideo jeśli zawiera dźwięk.

@Xarviel: No i spoko, chodziło właśnie o ustawienie muted na true. Ale jeszcze jedno. Mam problemy z ustawienie tego
playera na object-fit żeby .. no wiadomo, żeby przy zmniejszeniu szerokości ekranu film video pod overlay'em nadal stanowił
tło strony.

Masz jakoś dziwnie zrobione wcięcia przy htmlu, ale... kombinowałbym w taki sposób

<div className="overlay">
  <ReactPlayer ... />
</div>

żeby wideo było wewnątrz elementu .overlay. Wtedy dodajesz mu position: relative i pozostałe style robisz jako ::before, lub ::after z odpowienim z-index, żeby były nad filmem.

@Xarviel: A bo już kombinuję trochę jak łysy pod górę. Ale ok, popróbuję;-)