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

ErikPshat · 25.12.2018, 03:18

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

Скрипт:

<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 · 25.12.2018, 03:49

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

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

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

ErikPshat · 25.12.2018, 04:05

Сообщение от in1975

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

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

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

in1975 · 25.12.2018, 04:16

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

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

ErikPshat · 25.12.2018, 04:35

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

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

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

in1975 · 25.12.2018, 04:38

Сообщение от ErikPshat

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

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

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

ErikPshat · 25.12.2018, 05:31

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

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

Сообщение от in1975

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

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

ErikPshat · 25.12.2018, 07:32

Тест...

Дамп IDPS и ACT DAT 4 82

Ang3l42 · 25.12.2018, 07:40

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

ErikPshat · 25.12.2018, 07:58

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

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

in1975 · 25.12.2018, 08:43

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

ErikPshat · 25.12.2018, 11:27

Тэкс, пока сделал такую фигню, смотрите в том же посту.
Никак не получается наложить на картинку кнопку 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 · 25.12.2018, 13:33

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

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

ErikPshat · 25.12.2018, 15:52

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

Короче, ББ-код YOUTMOD добавил в панель редактирования

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

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

ErikPshat · 26.12.2018, 18:33

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

ErikPshat · 06.01.2019, 16:28

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