Как наложить иконку плеера поверх картинки на примере youtube превью


При использовании великолепного плагина YouTube PopUp jQuery Plugin который позволяет любой ссылке ведущей на страницу видео-хостинга YouTube добавить специальный CSS класс для запуска в модальном окне полноценного плеера.

Все это прекрасно для вновь добавляемых роликов. Но как быть с тем, что уже скопилось на сайте в массовом количестве.
В данной статье рассмотрим пример из css + js для присвоения превью роликов необходимой разметки как для запуска плеера, так и для стилизации самой картинки в виде наложения иконки плеера.


Для начала поясним, каким способом можно формировать ссылку на ролик с ютуба и его картинку превью.

Вот прямая ссылка на страницу ролика https://www.youtube.com/watch?v=LA0a4I3fl20
В этой ссылке нас в первую очередь интересует ID ролика, а именно LA0a4I3fl20 именно он является ключом для формирования как плеера, так и получения картинки-превью.

Все картинки для всех роликов опубликованных на Ютуб имею вид https://img.youtube.com/vi/LA0a4I3fl20/0.jpg
Где вместо LA0a4I3fl20 уникальный букво-цифровой ID клипа.


Меняя код ролика мы можем получать по прямым ссылкам адреса картинок.

https://img.youtube.com/vi/LA0a4I3fl20/0.jpg
Как наложить иконку плеера поверх картинки на примере youtube превью

https://img.youtube.com/vi/61agcZlPpsg/0.jpg


и так далее.


На этом принципе работает плагин для RSS-Bridge позволяющий из каналов и плейлистов Ютуб генерировать RSS ленты.





В качестве html кода для вставки на сайт мы получаем тот самый


<a href="https://www.youtube.com/watch?v=61agcZlPpsg"><img src="https://img.youtube.com/vi/61agcZlPpsg/0.jpg"></a>


или его BBCodes замену вида


[url=https://www.youtube.com/watch?v=61agcZlPpsg][img]https://img.youtube.com/vi/61agcZlPpsg/0.jpg[/img][/url]


И вот на сайте уже сотни таких публикаций



Со стороны даже сразу и не понятно что это картинка может запускать проигрыватель.



Необходимо наложить на нее иконку плеера. Например вот в таком стиле




В первую очередь нам потребуется создать метку для содержимого публикации целиком которая в DLE выводиться в шаблоне fullstory.tpl через переменную {full-story}
В качестве такой метки мы используем класс .full-content

в вашем шаблоне fullstory.tpl находим тег {full-story} и оборачиваем его
<div class="full-content">{full-story}</div>



Далее в свой набор CSS файлов добавляем


/* ============================================================== */
/* Стилизуем картинки ролика */
/* ============================================================== */
.full-content > a.bla-1 img { 
    border-radius: 15px;
    box-shadow: 0 1px 6px rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.12);
    width: 90vw;
}
/* вывод текстовой подсказки у ссылок запуска ютубролика */
.full-content > a.bla-1::after { 
    content: 'чтобы просмотреть ролик, кликните на картинку'; 
    display: block;
    text-align: center;
    margin-bottom: 20px;
}
/* ============================================================== */
/* Накладываем иконку ролика на картинки с ютуба */
/* ============================================================== */
.ytpu-container {
    position: relative;
}
.ytpu-container:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  opacity: 0.8;
  background: url(https://smartzone.ru/uloads/videoplay.png) center no-repeat;
  background-size: auto;
}


Далее в конце файла main.tpl перед закрывающим тегом

</body>


Добавляем


{* Стилизуем Youtube проигрыватель и добавляем активацию YouTube_PopUp *}
<script>
  $('a[href^="https://www.youtube.com/watch?"]').addClass("bla-1");
  $('a[href^="https://youtu.be/"]').addClass("bla-1");
  $(".full-content > a.bla-1 img").wrap('<div class="ytpu-container"/>');
</script>


а теперь "следите за руками"

После этого у всех ссылок внутри полной новости, которые начинаются с https://www.youtube.com/watch? или с https://youtu.be/ автоматически добавиться css класс bla-1
Если такая ссылка будет сдержать внутри себя изображение, то это изображение автоматически будет обернуто в блок

<div class="ytpu-container"/>
сама картинка
</div>


Для которого применяется стилизация (растягивается картинка, добавлятся теги и накладывается иконка https://smartzone.ru/uloads/videoplay.png

Собственно, поставленной задачи - наложения иконки поверх картинки мы достигли.

Но также рекомендуется установить плагин DLE-YouTubePopUp для запуска того самого видео плеера при клике на вашу картинку.



Демо:


https://smartzone.ru/worldnews/27612-KAK-PROEKTIRUJUT-PK-VNUTRI.html - из ютуб канала
https://chuyakov.ru/2573-ja-konechno-sovsem-ne-bolshojj.html - репост Вконтакте с Ютуба
https://blogssmartzone.com/196804-fletcher-kito-bitter.html - весь раздел музыка, автотрансляция с ютуб.


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

Показ видео с youtube по ссылке на страницу ролика - YouTube PopUp jQuery Plugin

YouTube PopUp jQuery Plugin Для DataLife Engine. Теперь в виде плагина для простой установке в свой шаблон. Доработка плагина для использования в шаблона DLE CMS. Например для RSS информеров в... читать далее

Ссылка Социальные сети и web 2.0 в клипах

Подборка клипов, посвященных известным соцсетям и Web 2.0-сервисам. В числе прочих Одноклассники, Facebook, Digg, MySpace, Ebay, Youtube. Пара роликов из любимого South Park, есть ролик про SEO.... читать далее

как я осваивал iTunes в качестве музыкального плеера

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

ipod classic 160gb - впечатления

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

Адаптивный Waveform для вашего аудиосервиса

Когда мне понадобилось для сайта одной радиопередачи наладить выкладку аудио архива, помимо админки нужен был еще и аудиоплеер. Радиопередача шла 40 минут плюс две музыкальные паузы. Использовать... читать далее

Водяной знак на картинки в DLE - плагин для DLE 13

Довольно часто требуется загружать водяные знаки на свои изображения не сиротливо в уголочке, а целиком по изображению, для затруднения несанкционированного копирования изображения на сторонних... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте