I have this working example in Bootstrap 4:
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-body pt-3 ">
<h5 class="card-title">Camera streaming</h5>
<div class="section d-flex justify-content-center embed-responsive embed-responsive-16by9">
<video id="remoteVideo" class="embed-responsive-item" controls autoplay loop muted></video>
</div>
<div class="row">
<div class="col-8 mt-2">
<button id="startButton" type="button" class="btn btn-outline-secondary" title="" data-toggle="tooltip" >Connect</button>
</div>
<div class="col-4 mt-3">
<p><b>Status:</b> <span id="status">offline</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
but is not working in Bootstrap 5
>Solution :
This should solve it.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-9">
<div class="card">
<div class="card-body pt-3 ">
<h5 class="card-title">Camera streaming</h5>
<div class="ratio ratio-16x9">
<video id="remoteVideo" controls autoplay loop muted></video>
</div>
<div class="row">
<div class="col">
<button id="startButton" type="button" class="btn btn-outline-secondary" title="" data-toggle="tooltip">Connect</button>
</div>
<div class="col-4 mt-3">
<p><b>Status:</b> <span id="status">offline</span></p>
</div>
</div>
</div>
</div>
</div>
</div>