Как вставить видео на сайт в перспективном искажении?

Question

[drokov]

Здравствуйте!

Проблема в следующем: на сайте должен быть расположен небольшой зацикленный видео-ролик, вызывающийся автоматически при загрузке страницы. Видео вертикальное и должно быть представлено в перспективе, вот так: https://yadi.sk/d/OYKeTKu-Tnsy3

Собственно, вопрос с моей стороны, как дизайнера: возможно ли реализовать эту штуку, если я отдам верстальщику/программисту видео-ролик 600*1200 px? Страница должна быть адаптивной и легко тянуться без съезда самого видео-ролика. В принципе, могу сделать видео уже в перспективе, не понятно только как быть с областями вокруг него. Там будет бэкграунд, а видео нельзя, насколько я знаю, сделать с прозрачным фоном.

Также, в случае, если решение найдется, ищу человека, кто сможет это воплотить в жизнь в недалеком будущем. Помимо видео нужна верстка одной адаптивной страницы с рисунком, градиентом, двумя-тремя ссылками и кнопкой ФБ-шаринга.

Спасибо!

Answer 1

[Владимир]

Для честной перспективы есть perspective (jsfiddle.net/YJ5Cj/), но там не всё ясно с поддержкой.
Не совсем честную перспективу можно сэмулировать CSS-трансформациями skew+rotate

Comments

[drokov]

Хотелось бы относительно честную перспективу. Вот, например, как дисплей телефона на баннера справа: https://yadi.sk/d/KTDz_WB7To8U2

[Владимир]

Тогда юзайте perspective, предварительно проверив корректность его работы в целевых браузерах. Caniuse почему-то молчит по этому поводу

[drokov]

Спасибо! Простите за глупый вопрос, я сам достаточно далек от верстки. Я так понимаю, в эту штуку можно просто запаковать видео и развернуть его под нужным углом? Поддержка нужна только современными браузерами и iOS-устройствами

[Владимир]

Да, вам понадобятся два оборачивающих div'a и немного css-кода

[drokov]

Еще раз спасибо!

Answer 2

[Анна Бакурова]

как Я поняла Вам нужно это https://vk.com/video56804047_167689249 тут всё показывается (вроде в конце видео)

Comments

[drokov]

Спасибо! Видимо это то, что нужно!