2

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

Becky CP
  • 83
  • 1
  • 2
  • 8

1 Answers1

1

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!

Isabel Inc
  • 1,871
  • 2
  • 21
  • 28
  • I've tried this, but it doesn't seem to change anything... I'm still just getting a black box with the play icons but it's not doing anything when clicked. I've tried clearing my cache but no difference... Any ideas? – Becky CP Jul 13 '16 at 14:17
  • I made a pen for you. Can you check this out? http://codepen.io/IsabelInc/pen/wWPQxw – Isabel Inc Jul 13 '16 at 14:20
  • This works great, any idea how to make it mobile responsive though? Your help is much appreciated, thank you! – Becky CP Jul 13 '16 at 14:47
  • Adding a width:100% should do the trick. Here are some links with examples for responsive videos https://coolestguidesontheplanet.com/videodrome/youtube/ Hope this answers your question. Good luck – Isabel Inc Jul 13 '16 at 15:02
  • This works for the video, but how can I use it so the laptop border also resizes? At the moment, on mobile, the video plays nicely but there are black bars to the top and bottom, covering the laptop image. – Becky CP Jul 13 '16 at 15:11
  • The black bars appear because of aspect ratio issues. Could you show a screenshot of what it looks like with the bars? – Isabel Inc Jul 13 '16 at 15:36
  • Looks like I found a solution on stack here's the link http://stackoverflow.com/questions/26617154/responsive-fullscreen-youtube-video-with-no-black-bars – Isabel Inc Jul 13 '16 at 15:39
  • Any luck with the link? – Isabel Inc Jul 13 '16 at 16:09
  • I've updated my first post with the code I'm currently using, from the links you provided. It seems to be making the video really small (even on desktop). Also I need to make the laptop image responsive too (so they both re-size together). – Becky CP Jul 14 '16 at 09:01
  • Check this out http://codepen.io/IsabelInc/pen/zBpAOp . There is a point when you need to readjust the padding on really small screens. All you need to do is add some media queries to adjust the padding slightly on the mobile depending on when the padding is not sufficient. Hope this helps. Cheers – Isabel Inc Jul 14 '16 at 12:22
  • Not really sure how to implement this? Should it replace something already in my css or be added to it? Not sure what it's supposed to be doing!! – Becky CP Jul 14 '16 at 14:30
  • I've updated my answer. You can just replace all your other code (html and css) with this code. Hope this answers your question. If it does don't forget to mark this as the answer. Cheers – Isabel Inc Jul 14 '16 at 14:37