сегодня мы продолжаем разговор о решение html виджета и продолжаем делать свои решения на основе его по-прежнему нас наш сайт креативом блок итак создадим новую страницу пусть это у нас будет не знает виджеты допустим да видео сегодня у нас задача сделать качественные видео виджет ну либо хотя бы попытку сделать его выбираем пустой шаблон так ну что же у нас получается есть информация по непосредственно только что созданной странице и мы хотим создать видео [музыка] видео виджет для загрузки из отличного источника нежели youtube да у нас есть видео соответственно это видео у нас грузится либо с youtube и либо swimmer 5 я увидел запрос по другим видеохостингом например контакт да то есть как бы соответственно решила записать это видео чтобы показать наглядно как можно создать подобные видео а блок и даже немножечко чуть больше не только само видео передавать но и сделать для этого видео skin и так что нам надо нам нужен html компонент то есть мы берем html компонент и дальше будем работать только с ним что же у нас есть некие при настройке которые нам принципе не нужны поэтому мы их сейчас сразу уберем и сделаем необходимые редактирование и так назовем наш компонент видео виджетом идем настройки и удалим ненужные нам настроечки также что м или код id нам не потребуется значит о чем сначала хочется поговорить о вконтакте есть open а соответственно это api вконтакте api документации описание методов здесь в принципе перечисленные некие типовые решения которые позволяют как бы извне обращаться к сервисам apple я понимаю что для не программистов это достаточно тяжелая штука хотя на мой взгляд ничего сложного в этом нет достаточно почитать документацию и попытаться понять как это все работает ну а не об этом и так что нас интересует в первую очередь нас интересует в первую очередь это некое готовое решение от вконтакте которая позволяет встраивать информацию с других нос вконтакте в другие сайты принципе где-то взять мне кажется уже все знают под видео есть кнопочка экспорт в этой соответственно кнопочки выбираете встроить стройка кода или он бывает меняется название как-то встану в общем строить код выбираете и [музыка] получаете вот примерно такой и фрейм код код вставки я уже сходил так скажем на youtube и на контакт взял встроен коды для встройки для того чтобы об этом своим поговорить и так вот youtube prime и фрейм стройка и в контакт у всех других видеохостингов примерно там плюс минус такой же и фрейм используется для встройки коды то есть по сути дела можно сделать некие универсальные универсальное решение как вот допустим в данном в данном ключе youtube и vimeo да этот блок нередактируемый поэтому мы можем воспользоваться только там тем что у него задано да то есть у нас есть плеер с размером положение справа слева по центру загрузка видео выбор сервиса то есть видите от выбора сервиса меняется количество настроек то есть любимую две настройки у ю туба четыре настройки то есть как бы у vkontakte принципе настроек немного они есть это автовоспроизведения которое реализуется вот данным назвать концом ссылки и размерами видео там зависимости от размера видео меняется применяемый скин так ладно не будем отвлекаться больше на это будем выполнять непосредственно задуманное так фон says is not find это у нас говорит о том что у нас здесь вот в css еще осталось ни удаленной информации все и теперь у нас именно что ругаться не будет итак мы назвали это видео виджет ну давайте его скорректируем видео виджет в к так чтобы у нас было правильное понимание и так для того чтобы нам красиво оформить видео нам нужно обложка для обложки у нас есть простой в принципе метод просто обычная верстка так скажем ничего сложного очень маленький кот мы его берем и переносим наш html код так далее для того чтобы он у нас получил вот ведь я переключился и он уже начал показываться для того чтобы он начал показывается более красиво мы ему применим заранее написанные каскадные стиль и так переходим сюда опять же так и говорим и вставляем сюда так обязательно у нас включена инкапсуляция это для того чтобы совпадающие стиле в более раннем из более ранние таблицы были переназначены именно вот этими стилями так этот нам прекрасный кот не нужен мы его удаляем сейчас по умолчанию в данной обложке стоит встроенный контейнер на то есть встраивание у нас присутствуют контейнеры в принципе если бы мы хотели сделать просто обложку для плеера youtube это это выглядело бы вот так да то есть вот у нас есть уже обложка это одна из девяти стандартных обложек которые были унаследованы от платформы л.п. мы и видит соответственно сейчас будем пользоваться так вернем обратно на шоу так что мы здесь еще можем дополнительно сделать мы можем дополнительно настроить непосредственно сам вид с кино и говорим у нас загрузка изображением все мы просто сделаем загрузку прямой загрузку изображения так как сохранить тик-так временно мы сейчас это дело поправим для того чтобы скачать искомую нашу обложечку так как мы это сделаем мы выберем исследовать и нам сразу же подскажет что это у нас за картиночка так подсказывала ну ничего так смотрим еще нашу картиночку так вот она у нас картиночка говорим открыть окне такая так будет быстрее открываем нашу картиночку новом окне сохраняем на компьютер так сохранить изображение как они так закрываем это мы закрываем до да видео-урок получается немножко за те же ну ладно пам пам пам пам консультация kontrol б так так так the hub все мы настроились так это видео мы закрываем потому что оно нам не нужно а вместо встроенного контейнера мы будем использовать прямую в стройку видео то есть вот эту часть мы строим контейнеру убираем и вставляем сюда [музыка] наш видео прям сразу значит вот у нас то есть в принципе мы можем использовать прямую и фрейм от vkontakte так и его сюда вставляем сим переключимся у нас здесь сразу виджета не появится так дальше нам что нужно сделать нам нужно с арси этот показатель заменить на нашу ссылочку и ссылочка нам будет у нас вот да он до этого показателя так вот до этого контру цен делаем так так свернем пока настроечки так вот кстати обложку то мне сейчас и загрузил сходом так вот раз не надо должна применяться так чтоб не применилась битая картинкам так попробуем еще раз о загрузилась отлично почему-то не не применилась здесь нам не страшно так теперь нам нужно сделать настройки дополнительные это будет текстовое поле текстовое поле так текстовое поле мы назовем его где мы зовем вот link фрейм вот так мы его назовём назвать в принципе можно как угодно это непринципиально можно даже оставить world 23 вообще не влияет ни на какие показатели просто мне так удобно так вставить ссылку нажимаем сохранить настройки вот у нас появилась настройка давайте мы сюда я стою конечно можно пользоваться не и фрейм можно сделать вот эту форму не под и фрейм а под до непосредственного ставку видео на этом тема более длинная сейчас мы ее разбирать пожалуй не будем можем посмотреть что у нас получилось текущем варианте [музыка] так не получилось что не получилось а вот же да так не то конечно мы не встроили обязательно надо чтобы вот это link фрейм было не только в настройках но и здесь так оп оп и теперь можно посмотреть вот у нас строилась только не встроилось почему то картинка не встроилось а все правильно картинка не встроилось потому что мы же изменили методологию [музыка] встраивание у нас теперь вот этот скин он нас идет вообще взамен все и вот этой ссылке то есть мы полностью туда подставили картинку так вот ролик да да вот все и теперь у нас соответственно наша картиночка она будет внутри ну вот принципе как бы скажем так самый что ни на есть примитивный метод стройке мы сделали дальше мы можем уже довести до ума на этот виджет и как бы добавить дополнительные настройки то есть в нашем случае мы можем встроить autoplay например до сюда мы пишем to play и делаем для autoplay настройку то есть настройка здесь достаточно примитивно либо нолик либо единичка идем на стройке говорим добавить настройку говорим так группа список вариантов так единичка нолик блин может не сработать не понятно почему не сработало пришло раз по идее должно срабатывать единичка нолик нет название должно начинаться с буквы а у нас типа единичка название нас не названию назначения так и группа кнопок группа кнопок тоже ну ладно в принципе мы можем по-быстрому это сделать формате текстового поля дикое поле у нас предусматривает для авто пуска ставь единицу так так так сохранить так на стройку нам не надо принципе настройки перейти нолик поставим ok идем в предпросмотр и в данном случае у нас не запустилась для того чтобы видео начала проигрываться не умножать если мы поставим единичку в том месте то соответственно будет работать autoplay так что у нас еще здесь качество скорость но это не настраиваемая извне так ну в общем то если поразбираться и поискать еще больше всяких разных возможностей для перенастройки то можно делать очень прикольные прикольно настраиваемый виджет в основном мы сделали можно сделать например другой размер так идем на стройке добавить настройку текстовое поле название настройки ну и пусть у нас будет 720 смотрим на стало побольше опять же управляя каскадными стилями можно выровнять само видео относительно обложке сейчас оно у нас заметно прижата к верхнему размеру вам возможно это у нас просто 340 и нет выравнивания посередине если мы допустим пропишем в исходном коде не 360 например 400 вообще конечно вот эта штука она должна быть полностью подстановкой потому что есть определенные размеры которые должны бы подставляться да то есть вот 4 720 и должно быть 405 405 то есть вот это всё кучка размер подгонять идем посмотреть да вот видите видео стало побольше ну то есть тут надо играться с настройками и смотреть как это все подгоняется но в целом я показал как это сделать достаточно просто внутри обложке внутри сменяемые обложке то есть мы можем любой момент зайти в настройки и загрузить сюда другую обложку ну и соответственно управление ссылками также можно доработать автозапуск размер ролика это уже можно более конкретно прописать ну что ж все на этом думаю в будущем я сниму ролик еще с более глубокими настройками если на это будут определенные запросы всего доброго