title: Add border to responsive embedded video
body: <p>I'm trying to add a border to a responsive embedded video.</p>
  
  <p>I have tried two different approaches to show the video: </p>
  
  <p>1.</p>
  
  <pre><code>&lt;div class="embed-responsive embed-responsive-16by9"&gt;
      &lt;iframe class="embed-responsive-item" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>2.</p>
  
  <pre><code>&lt;div style="position: relative; width: 100%; padding-bottom: 56.25%;" class="text-center"&gt;
      &lt;iframe allowfullscreen="" src="https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ" frameborder="0" style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried to add a border to both approaches, using:</p>
  
  <p>a.</p>
  
  <pre><code>border:3px solid #EEE;
  </code></pre>
  
  <p>b. (variations of below e.g. different width/height values etc, and where the parent div got a background color, which is the border color)</p>
  
  <pre><code>&lt;iframe style="left: 5px; top: 5px; width: 100%; height: 100% ... &gt;...&lt;/iframe&gt;
  </code></pre>
  
  <p>There is one consistent problem when adding the border, for all approaches: the video is either to big or too small for the space it is contained in. Either the video sort of zoomed in on, or it is too small such that there is a black borders appearing either vertically or horizontally depending on whether the width or height is too small. See image below.</p>
  
  <p><a href="https://i.stack.imgur.com/G9rrB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G9rrB.jpg" alt="enter image description here"></a></p>
  
  <p>I have tried to add magical values to get rid of the black border, like increasing outer-div's height padding a little, move the iframe by setting the left/right by some value and reducing it's size by some value (where all values are set to maintain the aspect ratio of the video). I would use this in worst case. The reason why I ask is because I hope there is a much smoother way to do it.</p>
  
  <p>How can I add any-sized border to a responsive video without black borders appearing or the video being zoomed in on?</p>