Hey, I need some help with creating a cool graphic for my website at . I want to have a video playing on the screen of a laptop image, and it should be responsive so it looks good on mobile too. Below is the CSS and HTML code that I've tried so far, but any advice or guidance would be greatly 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&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>