Блог

У меня проблемы с тем, что мое видео в bootstrap 5 не реагирует, вместо этого оно перекрывается с другим столбцом, в котором мой html-код:

 <!-- Media Player column -->
<div class="col-md-6 col-lg-6 bg-success text-light" id="local_video">
<div class="p5 embed-responsive embed-responsive-1by1 text-center">
<video class="embed-responsive-item text-center" id="recorded" controls>
</video>
<p class="p-2 overlay-content" id="p1" >recorded</p>     
<div class="text-center">
<button type="button" class="btn btn-outline-warning" button id="record">Record</button>  
<button type="button" class="btn btn-outline-warning" button id="play">Play</button> 
<button type="button" class="btn btn-outline-warning" button id="download">Download</button>                        
<button type="button" class="btn btn-outline-warning" button id="discard">Discard</button>
</div>
</div>   
</div> 
<!-- End of Media Player column -->

<!-- spectrum column tbd-->
<div class="col-md-6 col-lg-6 p-2" id="spectrum">
<div class="p-5 bg-primary text-light">Frequency Spectrum</div>
</div>
</div>
</div>
</section>
<!-- End of Recorded video and spectrum -->
 

и мой код .js-это:

 /* playButton */
playButton.addEventListener('click', () => {
    const superBuffer = new Blob(recordedBlobs, {type: 'video/webm'});
    recordedVideo.src = null;
    recordedVideo.srcObject = null;
    recordedVideo.src = window.URL.createObjectURL(superBuffer);
    recordedVideo.controls = true;
    recordedVideo.play();
    recordingStatus.innerHTML = "Playing";
});