title: Video inside Modal box not appearing correct size
body: <p>I'm currently trying to implement a video inside a modal box that will be responsive. I've got it working to the point where it displays and is responsive (there is a white space on the right at around 700px wide, not sure why) </p>
  
  <p>The problem is that trying to change the default size of the iframe it is staying the same size, or only changing the size of the video inside and breaking the responsiveness.</p>
  
  <p>I know I'm missing something simple, but implementing it inside a JS fiddle seems to somehow make it display better than inside my page!</p>
  
  <pre><code>&lt;!-- Button trigger modal --&gt;
  &lt;div class="span12 text-center"&gt;
  &lt;p&gt;&lt;button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"&gt; Video player modal &lt;/button&gt;&lt;/p&gt;
  
      &lt;div class="modal custom fade" id="myModal2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" tabindex="-1"&gt;
  
      &lt;div class="modal-body" style="position: relative; padding-bottom: 20%; overflow: hidden; paddng-top: 80%; height: 150%;"&gt;
  
      &lt;iframe width="640" height="360" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; max-width: 560px; max-height: 315px;" src="https://www.youtube.com/embed/C0DPdy98e4c" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /.modal-content --&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ka8uW/225/" rel="nofollow">http://jsfiddle.net/ka8uW/225/</a></p>