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

Question

I have the below image of a blank Macbook.

The image is 1034 × 543.

Answer 1

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.

HTML

<div>
  <iframe></iframe>
</div>

CSS

div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
}
div iframe {
    background: url(http://i.stack.imgur.com/zZNgk.png) 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 http://jsfiddle.net/41sdho4w/

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 http://jsfiddle.net/4g9e3ywy/