title: How to shrink or fit video on mobile devices in a two bootstrap columns setup?
body: <p>I have two columns in Bootstrap 4, one column has a video and the other has text or other type of content:</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-css lang-css prettyprint-override"><code>#video-meta-content {
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 0;
    border: 3px solid grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div id="vidcontainer" class="col-sm-8"&gt;
        &lt;video controls&gt;  
          &lt;p&gt;Your browser does not support video.&lt;/p&gt;
         &lt;source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4"&gt; 
        &lt;/video&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-4 "&gt;
        &lt;div style="" class="row" id="vid-content-row"&gt;
          &lt;div class="col-sm-12" id="video-meta-content"&gt;
            few paragraoh of text here
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The video size is 720 x 406. It displays correctly in desktop and landscape tablet but on phone the video is showing in a 720px wide frame, part of which is hidden due to the small screen. Some of the content column also goes on top of the video instead of stacking below the video column if screen is too small to fit both columns in one row. </p>
  
  <p>I would like the video to shrink to fit screen size.</p>