Tengo la siguiente imagen de una Macbook en blanco.

La imagen es 1034 × 543.

Quiero insertar un video de youtube dentro del área "gris" de la pantalla. Quiero que parezca que el video de YouTube se está reproduciendo en la pantalla del portátil.

También quiero que la imagen de la computadora portátil / video de YouTube se escale, de modo que cuando la página web esté en una tableta o vista móvil, la imagen y el video se reduzcan para que coincidan.

Estoy tratando de usarfitvid.js para lograr esto, pero no estoy teniendo suerte: puedo hacer que el video se ajuste a un tamaño estático, pero no puedo lograr que se ajuste perfectamente al cambiar el tamaño, se deforma.

A continuación se muestra mi marcado actual:

html:

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

HABLAR CON DESCARO A:

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

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