title: How can I make youtube video responsive along with background image?
body: <p>I have responsive background and I want to have a YouTube video over that background(not in full width). </p>
  
  <p>Here I have tried doing it.</p>
  
  <p><a href="http://jsfiddle.net/audetwebdesign/EGgaN/#run" rel="nofollow">http://jsfiddle.net/audetwebdesign/EGgaN/#run</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="bg-image"&gt;
              &lt;img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg"&gt;
               &lt;iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.bg-image {
  position: relative;
  }  
  .bg-image img {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  }
  .bg-image iframe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  }
  </code></pre>