title: Bootstrap embed responsive is not formatted well for mobile browser in landscape
body: <p>I am using the latest version of bootstrap and included the responsive embed for my youtube videos with the bootstrap container. The container sizes the video well within the constraints on the container however, the video looks very large while in landscape, taking up too much space. I think this is becuase the bootstrap container class changes its width based on media-queries which works fine for mobile devices in portrait but not well for mobile devices in landscape. Here is the standard code that I am using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;main id="content-wrapper" class="container"&gt;
    &lt;div class="embed-responsive embed-responsive-16by9"&gt;
      &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  &lt;/main&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way that I can fix the container so that it improves the formatting of the video in landscape?</p>