Becky CP Becky CP - 4 months ago 10
HTML Question

Inserting a video over an image with css and html

I'm looking to create a graphic on my website, http://176.32.230.43/testdigitalmarketingmentor.co.uk/ 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!



#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%;
}

<div id="laptop-panel">
<div id="laptop-panel-tv"></div>
<div id="laptop-panel-content-overlay">
<div id="laptop-panel-content">
<div class="embed-container">
<div style="width: 683px; " class="wp-video">
<!--[if lt IE 9]> <script>document.createElement('video');</script><![endif]-->

<div class="video-container">
<iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div></div></div>
</div>
</div>





This is what it looks like...

Answer

Would you be okay using something like this? It also helps to have more views on Youtube.

    #laptop-panel {
        position: relative;
        padding-top: 25px;
        padding-bottom: 67.5%;
        height: 0;
    }
    #laptop-panel iframe {
        box-sizing: border-box;
        background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/laptop-1000x728-trans.png) center center no-repeat;
        background-size: contain;
        padding: 11.7% 17.9% 15.4%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
  <div id="laptop-panel">
        <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

Happy coding!

Comments