Как адптивно сверстать блок с видео в ноутбуке?

Question

[Владислав Бойченко]

Собственно, сабж в заголовке и картинке.
Я кроме как позиционированием блока видео относительно фоновой картинки ничего придумать не могу. Тут же кучу медиа-запросов придется писать. Есть какие-то проверенные варианты?

Comments

[Maks Codov]

наверное на Java делают это

[dhat]

Maks Codov: на Scala, блин.

Answer 1

[Aleksey Chernikov]

Как то делал подобное, но с картинками внутри. Тогда помню, что нашел macbook, нарисованный на css (правда, в моем случае это Pro).
В принципе, вам так же можно было бы вставить туда видео.

Но я бы всё таки сделал, как было написано выше.
Создал бы контейнер, в который поместил бы видео и задал ему background в виде макбука. Остается вычислить отступы в процентах и готово.
upd. Нашел пример реализации и почти что копию вашего вопроса на SO

Answer 2

[Александр Вульф]

1. Можно сразу сделать видео с ноутбуком. Тогда все проще.
2. Можно к видео добавить backaground и добавить padding.

Comments

[Владислав Бойченко]

С уменьшением экрана блок видео будет уменшаться, как и фоновая картинка, а соответственно padding придется менять через медиа-запросы. Никак не могу найти респонсив-сайты с такими блоками, чтобы посмотреть

[Ankhena]

Владислав Бойченко: Считайте пропорции и задавайте размеры в vw

Answer 3

[Влад Токарев]

1. Делать ноут не фоновой картинкой всего блока, а фоном правого блока, внутри которого хранить видео.

2. Для видео задаем ширину и отступ сверху в %, например width: 80%; margin: 10% auto 0. В 1-м шаге блок лучше вырезать такого размера, чтобы видео и сам ноут получались целым числом пикселей, например, если видео 600px, то берем условно 80% -> ноут вырезаем блоком 600/0.8 = 750px, т.е. подбираем сначала нормальные %, а потом режем картинку.

3. Возможно следует добавить небольшой box-shadow (rgba(0,0,0,0.3)) для блока видео, чтобы граница была не очень резкой, когда будут получаться дробные пиксели видео при уменьшении.

PS. Отступ видео сверху, например 10%, считается от ширины родительского блока, а не его высоты.