Как реализовать миниатюру видео и поверх неё иконку play?

2 Комментарии

1. Подобный вопрос уже обсуждался: Как вывести изображение поверх миниатюры поста в зависимости от категории? Конечно, там решалась несколько иная задача, но результат аналогичный: картинка выводилась поверх другой картинки. Делается это просто: создается контейнер, внутри которого находится миниатюра, а поверх нее располагается слой с фоновой картинкой (кнопкой play).

   HTML:

   CSS:

   .box         {position:relative; width:200px; height:60px; overflow:hidden;}
   .video-thumb {width:200px; height:auto;}
   .overley     {position:absolute; top:0; left:0; width:100%; height:100%; background:url(img/play.png) no-repeat center center;} 
   

   Ну а тонкости уже зависят от вашей фантазии. Например, можно сделать кнопку ссылкой, и тогда по клику будет происходить какое-то действие (например, воспроизведение видео).

   Ответить

2. Спасибо Александр! Фантазии у меня будь здаров)

   В коде допущены ошибки при использовании проверяйте правильность написания

   Ответить