[FAQ] bb-код [YOUTMOD] - картинка Ютуб с открытием в новом модальном окне

[ErikPshat]

Пример по теме:
Очень красивое видео!!!

Скрипт:

<style type="text/css">
a.apple-wrapper:hover {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);border-radius:8px;}
</style>
<span style="display: inline-block;font-weight:bold;color:rgb(0, 0, 0);text-shadow:1px 10px 20px rgba(0,0,0,0.19); padding:0.4em 0.4em 0.4em 0;">{option}</span><br />
<a class="apple-wrapper" href="http://www.youtube.com/embed/{param}" target="_blank" onClick="window.open(this.href, '', 'width='+screen.availWidth/2+',height='+screen.availHeight/2+',top='+screen.availHeight/4+',left='+screen.availWidth/4); return false;"><div style="box-sizing: border-box;background: url(https://www.pspx.ru/forum/images/editor/apple.png) center center no-repeat, url(https://img.youtube.com/vi/{param}/mqdefault.jpg) center center no-repeat;padding:85px 148px;box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);border-radius:8px"><img width="48px" height="34px" src="https://www.pspx.ru/forum/images/editor/play2.png" title="{option}" alt="{option}" /></div></a>

in1975, интересная статья: http://qaru.site/questions/519/how-d...he-youtube-api

Без чёрных полос:

https://i.ytimg.com/vi_webp/<video id>/mqdefault.webp
https://i.ytimg.com/vi/<video id>/mqdefault.jpg

Эскизы с чёрными полосами по качеству и разрешению:

https://i1.ytimg.com/vi/<insert-youtube-video-id-here>/default.jpg -   default
https://i1.ytimg.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg - medium 
https://i1.ytimg.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg - high
https://i1.ytimg.com/vi/<insert-youtube-video-id-here>/sddefault.jpg - standard
https://i1.ytimg.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg - maxres

[in1975]

я тут достал: http://shpargalkablog.ru/2013/06/youtube.html

Видео подменил на картинки со ссылками, проверяйте "загрузку"

Там кстати пониже интересная штука - модальные окна CSS

[ErikPshat]

Сообщение от in1975 Там кстати пониже интересная штука - модальные окна CSS

Ага, интересная штука, окно можно перемещать куда угодно и раскрывать на весь экран.
Думаю стоит сделать отдельный ББ-код, чтобы не портить имеющиеся, заодно пригожится в нужных случаях.

А страница ХАНа стала быстрее грузиться. Но инфы всё-таки в шапке много, можно и что-то лишнее разбросать по старым постам. Слишком много вкладок, дублирующих одно и то же действие, только вид сбоку. Тот же PKG Linker.

[in1975]

ErikPshat, Если разбрасывать по сообщениям - будет еще запутанней, пользователь "потеряется". По поводу дубликатов не соглашусь - в других закладках о другом и подробнее.

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

[ErikPshat]

in1975, ну не совсем всё разбрасывать, а конечно с умом и по необходимости.

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

А вот некоторые картинки, которые полноразмерные, но уменьшённые скриптом, всё равно полностью грузятся и весят они уже не килобайты, а мегабайты.
Ну и конечно скрипт API Youtube постоянно не то что долго грузится из-за веса, а из-за ожидания отклика каждого. У них тоже сервера перегружены и запросы стоят в очередях.

[in1975]

Сообщение от ErikPshat которые полноразмерные, но уменьшённые скриптом, всё равно полностью грузятся и весят они уже не килобайты, а мегабайты.

Предлагаешь порезать размер? Но ведь для этого и делается - чтобы развернуть и посмотреть получше...

Весь ютуб я в той теме подменил...

[ErikPshat]

in1975, кстати, XnView тоже умеет сохранять изображения в формате webp - это формат сжатия Google, Так что можно во вложениях переходить именно на него, потому что, если взялась Google, тогда он теперь во всех браузерах будет поддерживаться.
Причём webp при 80% качества даёт размер в 2 раза меньше, чем jpg. Это модифицированный формат сжатия видео 8.

Найди два отличия: во вложении виден размер картинок.
Только плохо, что скрипт не хочет отображать webp как картинку из аттача, отображает просто как ссылку. Видимо в скриптах расширения где-то залочены.

Сообщение от in1975 Предлагаешь порезать размер? Но ведь для этого и делается - чтобы развернуть и посмотреть получше...

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

[ErikPshat]

Тест...

Дамп IDPS и ACT DAT 4 82

[Ang3l42]

ErikPshat, Да. Сейчас нормально

[ErikPshat]

Ang3l42, но зато, пока ссылка неактивна, она ничего не грузит с Ютуба, кроме этой лёгкой кртинки превью webp.

Такс, теперь нужно как-то картинку облагородить. А то она плоская какая-та совсем. Как бы её лучше сделать, за круглённой или просто с тенями по краям. И ещё думаю по центру повесить красный значёк Play

[in1975]

ErikPshat, все варианты хороши по своему

[ErikPshat]

Тэкс, пока сделал такую фигню, смотрите в том же посту.
Никак не получается наложить на картинку кнопку https://www.pspx.ru/forum/images/editor/play.png
https://www.pspx.ru/forum/images/edit...led_cinema.png
https://www.pspx.ru/forum/images/editor/apple.png

Синтаксис такой [youtmod="Название видео"]ID_video[/youtmod]
Замучался, комп тормозит, проц крутит по полной, как будто майнингом занимается, невозможно тестировать, нужно отдохнуть

Можно в теме хана код к видео применить. ББ-код будет со всплывающей опицией, куда надо будет ввести "Название видео", которое отображается при наведении мышки на картинку.
Может быть сделать без названия? Тогда не надо быдет ничего вводить, а просто вставлять ID как в обычном коде Ютуба.

Только давайте ваше мнение быстрее, потому что при изменении ББ-кода применённые в темах коды сломаются.

[in1975]

ErikPshat, с рамочками кузяво выглядит

По поводу названия я за тот вариант, что меньше грузит.

[ErikPshat]

in1975, ну я старался, чтобы меньше грузило. То есть, не использовал каких-либо API-функций с Ютуба.
Решил всё-таки, чтобы вводилось название к видео. Если что, можно его потом приспособить при автоматическом отображении в заголовке над видео. Никакой лишней нагрузки название не несёт, помимо лишних букв названия в посту.

Короче, ББ-код YOUTMOD добавил в панель редактирования .
Отличия на картинке вместо You tube написание You MOD.
Инструкция по использованию появляется при наведении курсора на иконку ББ-кода.

Так что меняй ссылки на видео в теме HANa.

[ErikPshat]

Такс, доделал окончательно тег. Какие будут замечания, предложения?

[ErikPshat]

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

[in1975]

Katy Perry - Dark Horse (Official) ft. Juicy J

тест2

тест3

А что за буква O где кнопка плей?

[ErikPshat]

in1975, а что не так?
Ну конечно ты все 3 видео расположил в одну строку, поэтому названия не перенеслись.
Тут получается, что я блоки видео поместил в тег DIV, а это блочный элемент, т.е. он всегда переносится на новую строку и занимает всю строку.
Можно поместить в тег SPAN - это строчный элемент, тогда можно будет помещать нескольок видео в одну строку.

Нужно бы конечно ещё дорабатывать код, пока что, на первое время, сделал так. Там ещё странности, что при наведении не работает увеличение теней как задумывалось. Поначалу всё работало. Так что нужно похимичить. Скрипт в шапке...

А что за буква О? Я не вижу.

У первого видео видимо нету обложки совсем.
Есть такие:

https://img.youtube.com/vi/0KSOMA3QBU0/0.jpg
https://img.youtube.com/vi/0KSOMA3QBU0/1.jpg
https://img.youtube.com/vi/0KSOMA3QBU0/2.jpg
https://img.youtube.com/vi/0KSOMA3QBU0/3.jpg

И такие:

https://img.youtube.com/vi/0KSOMA3QBU0/default.jpg

[Ang3l42]

Сообщение от ErikPshat А что за буква О? Я не вижу.

Видимо черный кругляк который за кнопкой PLAY.

[ErikPshat]

А вот такая есть, которая нам нужна 320х180:

https://img.youtube.com/vi/0KSOMA3QBU0/mqdefault.jpg