Оверлей кнопка на видео HTML5 video overlay play button

html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <video class="video"> <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" /> </video> <div class="playpause"></div> </div>
.video { width: 100%; border: 1px solid black; } .wrapper{ display:table; width:auto; position:relative; width:100%; } .playpause { background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png); background-repeat:no-repeat; width:50%; height:50%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center; }
$('.video').parent().click(function () { if($(this).children(".video").get(0).paused){ $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); }else{ $(this).children(".video").get(0).pause(); $(this).children(".playpause").fadeIn(); } });

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Composer – пакетный менеджер PHP. Что и как? (13.01.2022)
- 0 MySQL и PHP: Вычисление возраста (количество лет) по дате рождения (20.06.2017)
- 0 Как изменить часовой пояс на сервере (16.11.2013)
- 0 PHP: Как удалить файлы по маске? (07.11.2013)
- 0 Регулярные выражения в PHP (12.04.2014)
- 0 Защита от спама в phpBB3 без капчи (09.10.2013)
- 0 Twitter Bootstrap Carousel Crossfade (09.09.2013)
- 0 Php функция implode внутри запроса SELECT к MySQL. (02.09.2013)
- 0 Inline-block vs float (22.08.2013)
- 0 DHTMLX: Фильтрация в колонке типа Subgrid, вложенной в Grid (05.08.2013)
- 0 Как убрать папку www из денвера? (22.03.2013)
- 0 Устанавливаем и настраиваем WampServer (аналог MAMP в Mac и возможная замена Denwer'у) на Windows (22.03.2013)
- 0 Список li в две колонки (CSS) (13.03.2013)
- 0 Полезные возможности PhpStorm и настройка горячих клавиш (14.03.2013)
- Асинхронная загрузка css (21.01.2021)
- Оборачиваем изображения в ссылки с помощью хука add_filter('the_content', ...) в functions.php (14.08.2019)
- Добавляем форму отправки обратного звонка на сайт (по Javascript и с ReCaptcha) (29.07.2019)
- Преимущества ИТ–аутсорсинга (25.03.2019)
- Отладка PHP кода в консоли браузера (22.03.2019)
- Ошибка в phpmyadmin: count(): Parameter must be an array or an object that implements Countable (27.03.2019)
- Две или более reCaptcha на одной странице. Несколько рекапч на странице (25.02.2019)
- Оверлей кнопка на видео HTML5 video overlay play button (15.02.2019) ← вы тут
- Flip-вращалка на css. Эффект кручения карточки на обратную сторону (25.10.2018)
- Выравниваем div по-центру другого div в меню Bootstrap (12.10.2018)
- Плавная прокрутка на странице (Bootstrap JS Scrollspy) (12.10.2018)
