Bootstrap Responsive Embed

The Bootstrap’s responsive embed utility is used to an easy way to scale videos and slide shows to their containing block.

The responsive embed utility can be used on <iframe>, <video>, <object>,  <embed> elements.

Aspect Ratios:

The aspect ratio of an element expresses the proportional relationship between width and height. Two common video aspect ratios are 4:3 (universal video format), and 16:9 (universal for HD television and European digital television).

Responsive Iframes:

Step – 1) Add HTML:  You can use a container element, like <div>, and add the iframe inside of it.

Step – 2) Add CSS:  Add a percentage value for padding-top to support the aspect ratio of the container DIV. you will create an aspect ratio of 16:9, which is the default aspect ratio of YouTube videos.

1.Example:

<h2>Responsive Iframe</h2>
<div class="container">
 <iframe class="responsive-iframe" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
</div>

Style:

<style>
.container {
 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>

OUTPUT:

2.Example:

Video with 21:9 aspect ratio.

<div class="bs-example">  
  <h2 class="mt-4">Video with 21:9 aspect ratio</h2>
  <div class="embed-responsive embed-responsive-21by9">
   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
  </div>   
</div>

OUTPUT:

3.Example:

Video with 4:3 aspect ratio.

<div class="bs-example">
    <h2 class="mt-4">Video with 4:3 aspect ratio</h2>
       <div class="embed-responsive embed-responsive-4by3">
               <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/YE7VzlLtp-4"></iframe>
       </div>
</div>

OUTPUT: