Ich habe das folgende Bild eines leeren Macbooks.

Das Bild ist 1034 × 543.

Ich möchte ein YouTube-Video in den "grauen" Bereich des Bildschirms einfügen. Ich möchte, dass es so aussieht, als würde das YouTube-Video auf dem Laptop-Bildschirm abgespielt.

Ich möchte auch, dass das Laptopbild / Youtube-Video skaliert wird, sodass Bild und Video übereinstimmen, wenn sich die Webseite in einer Tablet- oder Mobilansicht befindet.

Ich versuche, @ zu verwendfitvid.js um dies zu erreichen, habe ich aber kein Glück - ich kann das Video auf eine statische Größe bringen, aber ich kann es nicht dazu bringen, dass es immer noch perfekt auf die Größe passt, es wird deformiert.

Below ist mein aktuelles Markup:

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;
  }
}