Html – wrapping a youtube video in a static image “frame” and maintain responsive resizing


I have the below image of a blank Macbook.

enter image description here

The image is 1034 × 543.

I want inset a youtube video inside of the "grey" area of the screen. I want it to appear as if the youtube video is playing on the laptop screen.

I also want the laptop image / youtube video to scale, so that when the web page is in a tablet or mobile view, the image and video shrink to match.

I am trying to use fitvid.js to accomplish this but am not having luck — I can get the video to fit at one static size but I cannot get it to still fit perfectly on resize, it gets deformed.

Below is my current markup:


<div class="col-sm-12">
  <div class="title">
    <h2>What's New</h2>
    <small>ASC Sneak Peak</small>
  <div class="macbook-wrapper">
    <iframe width="715" height="402" src="//**url**" frameborder="0" allowfullscreen></iframe>


  background: url('../img/content/home/macbook.png') no-repeat;

  .fluid-width-video-wrapper {
    width: 97.5%;
    background: #000;

Best Solution

You could instill some trickery with padding and percentages, that way you could have it scale accordingly. Basically, setting up a container that's purely % base, with an absolutely position iframe that scales accordingly to the container.




div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
div iframe {
    background: url( center center no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

You'd just need to add box-sizing: border-box; and some padding to position the iframe within the screen. Check it out

To take it a bit further - here's a version with a container to help control the max-width and max-height rather then relying on the body / viewport

Related Question