title: How to create responsive video in Bootstrap-5
body: <p>I have a two column layout, and wish to have a video in the first column, and an image in the second which are responsive.
  I have tried several options, and the image works well, however, the video is not responsive.
  The best result I have been able to create is to not have width/height attributes for the video.</p>
  <pre><code>                       &lt;div class=&quot;row&quot;&gt;
                                  &lt;div class=&quot;col-sm-6 order-first&quot;&gt;
                                          &lt;div class=&quot;card&quot;&gt;
  &lt;iframe width=&quot;1280&quot; height=&quot;720&quot; src=&quot;https://www.youtube.com/embed/mEQ8NJsAowg&quot; title=&quot;Player One&quot; frameborder=&quot;0&quot; allow=&quot;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;
                                                  &lt;div class=&quot;card-body&quot;&gt;
                                                          &lt;h5 class=&quot;card-title&quot;&gt;196&lt;/h5&gt;
                                                          &lt;input type=&quot;number&quot; name=&quot;playerOneAddScore&quot; id=&quot;playerOneAddScore&quot;&gt;
                                                          &lt;p class=&quot;card-text&quot;&gt;
                                                          &lt;/p&gt;
                                                  &lt;/div&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div class=&quot;col-sm-6&quot;&gt;
                                  &lt;div class=&quot;card&quot;&gt;
                                          &lt;img src=&quot;https://dummyimage.com/1280x720/000/fff&amp;text=Test+image&quot; class=&quot;card-img-top img-fluid&quot; alt=&quot;Player Two&quot;&gt;
                                          &lt;div class=&quot;card-body&quot;&gt;
                                                  &lt;h5 class=&quot;card-title&quot;&gt;196&lt;/h5&gt;
                                                          &lt;input type=&quot;number&quot; name=&quot;playerOneAddScore&quot; id=&quot;playerOneAddScore&quot;&gt;
                                                          &lt;p class=&quot;card-text&quot;&gt;
                                                          &lt;/p&gt;
                                          &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;&lt;!-- end row --&gt;
  </code></pre>
  <p>Fiddle: <a href="https://jsfiddle.net/yabk2zxv/" rel="nofollow noreferrer">Fiddle</a></p>