Inserting a video over an image with css and html
<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>