Как стилизовать video таким образом?

Question

[yskl24]

Наткнулся на верстку секции с video, которое рядом с текстом и понятия не имею как стилизовать video player таким образом.
Вот фрагмент из psd макета.


Если что, то верстаю на bootstrap 3.
Тег видео:

Подскажите пожалуйста, как такое реализовать?

Answer 1

[FeST1VaL]

Что именно стилизовать? кнопку Play? делаете поверх блок типо overlay с кнопкой в центре абсолютом.
А потом по нажатию на кнопку через JS запускаете видео и скрываете overlay.

Comments

[yskl24]

да, кнопку play и убрать другие элементы управления.
сейчас все это дело выглядит вот так.

[yskl24]

сейчас буду пробовать, спасибо.

[FeST1VaL]

yskl24, вот пример, но тут через тэг сделано, а не через ютубовский iframe, но все же

[yskl24]

Артем Будин, спасибо.

[yskl24]

Артем Будин, все равно не получается. Застрял на этой хрене уже 2 день.
Поможете пожалуйста?

[FeST1VaL]

yskl24, сделай песочницу если можешь

[yskl24]

Артем Будин, сделал https://jsfiddle.net/sctLgqy6/

как же я буду вам благодарен за помощь.

[FeST1VaL]

yskl24, ну блин... слишком много лишнего кода... ну примерно так... https://jsfiddle.net/fest1val/tegxm36r/
Единственное что вы по сути не должны задавать размеры блоку с видео... короче говоря не идеальный тут вариант, тк много лишнего, но суть думаю поймете... просто video__overlay поверх видео. Скрипт запуска видео я не стал делать думаю это не проблема? просто после клика по video__overlay скрываете overlay и запускаете видео

[yskl24]

Артем Будин, извините, что много лишнего кода.
большое прибольшое спасибо вам за помощь!)
да, в остальном уже сам разберусь.

Answer 2

[Андрей Охотников]

У Video в HTML есть свои методы и свойства. Т.е. можно создать любые свои кастомные элементы - кнопки плей, стоп и т.д. и повесить на них обработчики. Вот тут подробнее

Comments

[yskl24]

большое спасибо за ваш ответ.
это то что нужно.