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

Как реализовать миниатюру видео и поверх неё иконку play? | n-wp.ru Вопросы

Хотелось бы реализовать нечто похожее:

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

DimaDodonov

Сегодня снова лягу спать завтра...

Оцените автора
Добавить комментарий

  1. tiaurus

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

    HTML:

    <div class="box">
        
        <div class="overley"></div>
    </div>
    

    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. DimaDodonov автор

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

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

    Ответить