title: Inserting a video over an image with css and html
body: <p>I'm looking to create a graphic on my website, <a href="http://176.32.230.43/testdigitalmarketingmentor.co.uk/" rel="nofollow noreferrer">http://176.32.230.43/testdigitalmarketingmentor.co.uk/</a> where a video is played from within a picture of a laptop (so it looks like the video is playing on the laptop screen). I also want this to be mobile responsive (i.e. rescale depending on screen size). You can scroll down to "Showreel" to see what I have managed so far with the following css and html... Any help/advice/guidance would be appreciated!</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>#laptop-panel {
          position: relative;
          width: auto;
          height: 625px;
          overflow: hidden;
      }
  
      #laptop-panel-tv {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png') no-repeat center;
      z-index: 10;
      }
  
      #laptop-panel-content-overlay {
          position: absolute;
          top: 70px;
          width: 100%;
          height: 444px;
          z-index: 12;
  
      .embed-container {
          position: relative;
          padding-bottom: 56.25%;
          padding-top: 30px;
          height: 0;
          overflow: hidden;
          max-width: 100%;
          height: auto;
        }
  .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 30px; height: 0; overflow: hidden;
  }
   
  .video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="laptop-panel"&gt;
      &lt;div id="laptop-panel-tv"&gt;&lt;/div&gt;
      &lt;div id="laptop-panel-content-overlay"&gt;
      &lt;div id="laptop-panel-content"&gt;
          &lt;div class="embed-container"&gt;
          &lt;div style="width: 683px; " class="wp-video"&gt;
  &lt;!--[if lt IE 9]&gt;    &lt;script&gt;document.createElement('video');&lt;/script&gt;&lt;![endif]--&gt;
  
     &lt;div class="video-container"&gt;
  &lt;iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;amp;controls=0&amp;amp;showinfo=0" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
     &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;            
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/shf87.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/shf87.png" alt="This is what it looks like..."></a></p>