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

[ErikPshat]

Пример по теме:
LlAZggmciGM

Скрипт:
<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(http://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="http://www.pspx.ru/forum/images/editor/play2.png" title="{option}" alt="{option}" /></div></a>

in1975, интересная статья: http://qaru.site/questions/519/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api

Без чёрных полос:
https://i.ytimg.com/vi_webp/<video id>/mqdefault.webp
https://i.ytimg.com/vi/<video id>/mqdefault.jpg
https://i.ytimg.com/vi_webp/4vxdwQ_mO84/mqdefault.webp https://i.ytimg.com/vi/4vxdwQ_mO84/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

https://i1.ytimg.com/vi/knlr7vda0NU/default.jpg https://i1.ytimg.com/vi/knlr7vda0NU/mqdefault.jpg https://i1.ytimg.com/vi/knlr7vda0NU/hqdefault.jpg

[in1975]

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

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

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

[ErikPshat]

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

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

[in1975]

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

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

[ErikPshat]

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

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

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

[in1975]

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

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

[ErikPshat]

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

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

http://www.pspx.ru/forum/attachment.php?attachmentid=15245 http://www.pspx.ru/forum/attachment.php?attachmentid=15246

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

[ErikPshat]

Тест...

4vxdwQ_mO84

[Ang3l42]

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

[ErikPshat]

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

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

https://cdn0.iconfinder.com/data/icons/social-media-9-free/32/play_youtube_social_media_logo_brand-128.png https://i.pinimg.com/originals/13/d1/f4/13d1f47003de92abd921eab03dc5f2d0.png http://www.myiconfinder.com/uploads/iconsets/256-256-8dfc6d65473fb10ca8d009c68ae95bc3-youtube.png http://icongal.com/gallery/image/2118/android_r_youtube.png https://vidboxcapture.com/gamecapture/assets/images/logos/youtube_logo.png https://images.sftcdn.net/images/t_app-logo-l,f_auto,dpr_auto/p/5b4c8224-072f-11e8-b57c-02420a000a06/961614648/play-tube-youtube-player-logo.png

[in1975]

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

[ErikPshat]

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

Синтаксис такой ID_video
Замучался, комп тормозит, проц крутит по полной, как будто майнингом занимается, невозможно тестировать, нужно отдохнуть :)

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

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

[in1975]

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

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

[ErikPshat]

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

Короче, ББ-код YOUTMOD добавил в панель редактирования http://www.pspx.ru/forum/cleardoc/editor/youmod.gif.
Отличия на картинке вместо You tube написание You MOD.
Инструкция по использованию появляется при наведении курсора на иконку ББ-кода.

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

[ErikPshat]

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

[ErikPshat]

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

[in1975]

0KSOMA3QBU0
Mx4Sw-ClFeg
OpQFFLBMEPI

А что за буква 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/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

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

[Ang3l42]

А что за буква О? Я не вижу.
Видимо черный кругляк который за кнопкой PLAY.

[ErikPshat]

А вот такая есть, которая нам нужна 320х180:
https://img.youtube.com/vi/0KSOMA3QBU0/mqdefault.jpg

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

[in1975]

Ang3l42, да

[Ang3l42]

in1975, Мне этот кругляк тоже не нравится. Надо другую иконку какую-то.

[in1975]

Ang3l42, просто там наложение 2х иконок, вот поэтому некрасиво

[Ang3l42]

in1975, http://www.pspx.ru/forum/showpost.php?p=1161530 тут он не лучше выглядит. Вроде одна иконка. Но без черного круга было бы красиво.

[in1975]

Ang3l42, тогда надо выбрать предпоследнюю иконку, ведь она уменьшается

[Ang3l42]

in1975, Кстати да. Стандартная иконка ведь.

[ErikPshat]

Сменил иконку mqdefault.webp на mqdefault.jpg ибо я заметил не в первый раз видео без иконки. Видимо потому что видео низкого качества и короткое. Наверное поэтому иконку не делают в WEBP, а вот в JPG имеется. Разница в размере 1/3, но и это незначительно, так что пойдёт.
Вот тест: http://www.pspx.ru/forum/showpost.php?p=1162941

Ну и что вы решили, поменять ещё иконку Play? По мне так и эта нормально смотрится. Огна ведь подходит к дизайну рамочки.

[Ang3l42]

Огна ведь подходит к дизайну рамочки.
Можно затереть эту черную рамку и тогда будет норм. А так она глаза режет. Выглядит как сантех прокладка для труб) А вообще ведь есть стандартная иконка. Которая предпоследняя.

[ErikPshat]

Ang3l42, тебе не нравится глянцевая окантовка? А если самая последняя http://www.pspx.ru/forum/showpost.php?p=1161530

Просто стандартная иконка на самом видео имеется в открывшемся окне.

[Ang3l42]

ErikPshat, Ну вот я о ней тоже думал. Но было бы интересно готовые варианты рассмотреть.
тебе не нравится глянцевая окантовка?
Мне не нравится, что эта черная окантовка как яйцо сверху и снизу выпирает.
Да и просто предпоследняя иконка - стандартная. Чего голову ломать?

[ErikPshat]

Но было бы интересно готовые варианты рассмотреть.
Хорошо, вот тебе пример: http://www.pspx.ru/forum/showpost.php?p=1162941

Там ещё сделал выпирание теней при наведении.

[Ang3l42]

Хорошо, вот тебе пример
Ну и нормально. Стандартная иконка. Сразу понятно, что ютуб.

[ErikPshat]

Ang3l42, ну и пусть так останется. Потом думаю сделать, чтобы в один ряд можно было несколько видео вставлять а сейчас пока только по одному видео в строке.

P.S. Скрипт в шапке обновил.