Iframe 100 responsive

Iframe responsive

<div class="row">	
  <div class="col-md-12 d-flex justify-content-center"> 
    <div class="video-iframe">
      <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>
    </div>
  </div>
</div>

<style>
  
  .video-iframe {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
  }

  .video-responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
      border: none;
  }

  .d-flex {
  	display: flex;
  }
  
  .justify-content-center {
    justify-content: center;
  }
</style>

Iframe 100 responsive

<style>
    .container-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ }
    .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
</style>
<div class="container-iframe" data-widget="">
    <iframe src="index.html" class="responsive-iframe" frameborder="0"></iframe>
</div>

Similar codes

0 vote149 views2 answers
Stopimmediatepropagation vs stoppropagation
Html
0 vote163 views1 answer
Etiqueta blockquote en html5
Html
6 votes163 views2 answers
How to collect input textbox in html
Html
0 vote171 views1 answer
Click on a button and start downloading data html
Html
0 vote182 views1 answer
Image from website in whatshapp with meta tag
Html
1 vote168 views1 answer
How to display the first frame of the video element in html
Html
0 vote170 views2 answers
Was blocked because of a disallowed mime type (“text/html”).
Html
6 votes181 views2 answers
Html meta redirect to another page
Html
1 vote215 views1 answer
Webkit autofill background color
Html
4 votes205 views3 answers
Html send email
Html