iframe composant responsive code example

Example 1: responsive Iframe

Making responsive iframe became more easy with a tool called "responsive iframer".

How to work with that:

1. It is so simple to do. Just go to this link: https://ilav.xyz/responsive-iframe
2. Give the link and some other details that you may need.
3. Go down and click the check for the copy button.
4. Then paste it where you want.


Check this: https://ilav.xyz/html-editor?responsiveiframe

Example 2: 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>