title: 2 side by side youtube videos bootstrap 3
body: <p>I'm having a problem with my responsive embedded youtube where I have 2 videos side by side. It looks fine until the screen size is mobile. Instead of stacking on top of each other they size down to tiny boxes, like in this picture. <a href="https://i.stack.imgur.com/4cxxs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4cxxs.png" alt="enter image description here"></a></p>
  
  <p>Here is my page this is on <a href="http://www.pscompetitiveedge.com/references.html" rel="nofollow noreferrer">http://www.pscompetitiveedge.com/references.html</a></p>
  
  <p>HTML code for that top part of the page: </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;h1&gt;References&lt;/h1&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-sm-6"&gt;
  &lt;div class="embed-responsive embed-responsive-16by9"&gt;
    &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/aaINOaWt938?rel=0?"&gt;&lt;/iframe&gt;
  &lt;p&gt;Click Above To View Testimonial Video!&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="col-sm-6"&gt;
  &lt;div class="embed-responsive embed-responsive-16by9"&gt;
    &lt;iframe class="embed-responsive-item" src="https://www.youtube.com/embed/e6UWqeLaMm4?rel=0?"&gt;&lt;/iframe&gt;
  &lt;p&gt;Click Above To View Peter In Seminar Action!&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;&lt;/div&gt;
  &lt;div class="clearfix"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>