vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах

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

Собственно, сабж в заголовке и картинке.
Я кроме как позиционированием блока видео относительно фоновой картинки ничего придумать не могу. Тут же кучу медиа-запросов придется писать. Есть какие-то проверенные варианты?
501f78c3e8a6457595b446b69675b217.png
  • Вопрос задан
  • 430 просмотров
Пригласить эксперта
Ответы на вопрос 3
Как то делал подобное, но с картинками внутри. Тогда помню, что нашел macbook, нарисованный на css (правда, в моем случае это Pro).
В принципе, вам так же можно было бы вставить туда видео.

Но я бы всё таки сделал, как было написано выше.
Создал бы контейнер, в который поместил бы видео и задал ему background в виде макбука. Остается вычислить отступы в процентах и готово.
upd. Нашел пример реализации и почти что копию вашего вопроса на SO
Ответ написан
Комментировать
mannaro
@mannaro
Умею профессионально гуглить
1. Можно сразу сделать видео с ноутбуком. Тогда все проще.
2. Можно к видео добавить backaground и добавить padding.
Ответ написан
Vadiok
@Vadiok
Веб разработчик
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%, считается от ширины родительского блока, а не его высоты.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы