оборачивая видео на 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;
}
}