iframe responsive

1<div class="row">	
2  <div class="col-md-12 d-flex justify-content-center"> 
3    <div class="video-iframe">
4      <iframe class="video-responsive-iframe" src="<?= $blog_item['Blog']['video_url'] ?>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
5    </div>
6  </div>
7</div>
8
9<style>
10  
11  .video-iframe {
12	position: relative;
13	width: 100%;
14	overflow: hidden;
15	padding-top: 56.25%; /* 16:9 Aspect Ratio */
16  }
17
18  .video-responsive-iframe {
19      position: absolute;
20      top: 0;
21      left: 0;
22      bottom: 0;
23      right: 0;
24      width: 100%;
25      height: 100%;
26      border: none;
27  }
28
29  .d-flex {
30  	display: flex;
31  }
32  
33  .justify-content-center {
34    justify-content: center;
35  }
36</style>