CODEWITHSUNDEEP
htmlcss
Becky CP
Becky CP

Reputation: 83

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...

Upvotes: 2

Views: 5690

Answers (1)

Isabel Inc
Isabel Inc

Reputation: 1899

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!

Upvotes: 1

Related Questions