Eu tenho a imagem abaixo de um Macbook em branco.

A imagem é 1034 × 543.

Quero inserir um vídeo do youtube dentro da área "cinza" da tela. Quero que apareça como se o vídeo do youtube estivesse sendo reproduzido na tela do laptop.

Também quero que a imagem do laptop / o vídeo do youtube seja dimensionada, de modo que, quando a página da Web estiver em uma exibição em tablet ou celular, a imagem e o vídeo diminuam para corresponder.

Estou tentando usarfitvid.js para fazer isso, mas não estou tendo sorte - posso ajustar o vídeo em um tamanho estático, mas ainda não consigo ajustá-lo perfeitamente no redimensionamento, ele é deformado.

Abaixo está minha marcação atual:

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>

SASS:

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

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