оборачивая видео на YouTube в статическое изображение «frame» и поддерживая адаптивное изменение размера

У меня ниже изображение пустого Macbook.

Изображение 1034 × 543.

Я хочу вставить YouTube видео внутри «серой» области экрана. Я хочу, чтобы это выглядело так, как будто видео на YouTube воспроизводится на экране ноутбука.

Я также хочу, чтобы изображение с ноутбука / видео на YouTube масштабировалось, чтобы при просмотре веб-страницы в виде планшета или мобильного устройства изображение и видео сокращались в соответствии.

Я пытаюсь использоватьfitvid.js чтобы добиться этого, но мне не повезло - я могу заставить видео соответствовать одному статическому размеру, но я не могу сделать так, чтобы оно по-прежнему идеально подходило при изменении размера, оно деформируется.

Ниже моя текущая разметка:

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

Ответы на вопрос(1)

Ваш ответ на вопрос