Вот как раз эту ссылку с браузера скопировали, нужно поставить в первый раздел, как поставили, делаем клик просто по окну, и в низу у нас появляются коды, как для bb и HTML и берем который вам нужен. Если брать от DD то знайте там размер и ширина стандартная идет, что задала сама система.
Если HTML, то там вы можете сами выставить какой вам нужно размер, все они работают на всех модулях и на форуме также. Есть еще один вариант, это с первоисточника брать, а точнее самого ютуб, то BB код берем в браузер строке, а вот HTML код, он находиться под видео, что также копируем и ставим размер и ставим.
Но к примеру иногда делаю по другому, просто ссылки многие могут брать, но нам нужно это видео, но под другим источником. Тогда создаем на Одноклассниках аккаунт и там можно в разделе видео его сформировать, что по изображению видно.
Как включить новый плеер на Ютубе
Теперь можете посмотреть видео урок:
Источник: zornet.ru
Фоновое видео для сайта Youtube Player
Уважаемые пользователи! Мы благодарим Вас за то, что Вам интересен нашен контент, поэтому с каждым днем хотим становиться все лучше и лучше!
Большое спасибо за вашу помощь и внимательность к нам!
Уже не для всех секрет и новость, что все чаще и чаще появляются посадочные страницы с привлекающим дизайном и обилием функциональности. Так вот хочу рассказать, что внедрение фонового видео для сайта уже пользуется большим спросом, чем те же сайты, которые сделаны, например, со слайдером.
Так как интернет-провайдер позволяет потреблять за копейки достаточно приличный на мой взгляд трафик, почему бы не воспользоваться подобной идеей и не встроить себе фоновое видео, которое сможет привлечь спрос клиентов на услуги. Речь пойдет об одном плагине, написанным одним талантливым разработчиком Matteo Bicocchi, — JQuery Youtube Player. Для ознакомления, в источниках материала, я указал ссылку на GitHub где собственно и находится данный плагин и другие плагины этого разработчика. Главное ознакомитесь с демо версией и обязательно с документацией, которую я конечно подготовил для Вас собственно специально, но может чего то не опишу полноценно.
Первый шаг. Подключение стилей, библиотек и скриптов. HTML заготовка.
Подключаем файл стилей demo.css и файл стилей самого плагина jquery.mb.YTPlayer.min.css, библиотеку JQuery и самого скрипта библиотеку jquery.mb.YTPlayer.min.js, а также не забываем про сам скрипт video.js.
После этого можем смело приступать к макету HTML. Особо не придирайтесь к дизайну, я думаю он Вам по любому будет не нужен, так как главное рассмотреть данный плагин и правильно его внедрить в свой сайт. Поэтому я руководствовался простой формулировкой — «больше нужного, меньше не нужного». И так, первое с чего начнем, так это со вставки пожалуй видео на сайт.
Делается это все в div блоке, которому мы присваиваем идентификатор video и задаем специальный атрибут data-property, который содержит специальные свойства для расширения видео. О свойствах поговорим в третьем шаге — > документация.
Если мы вставим просто фоновое видео, это будет смотреться не актуально, ведь нам нужно использовать подобный функционал для привлечения клиентов и вызывать интерес, именно такими свойства и возможностями в дизайне мы сможем получить спрос и отклик на наши услуги. Поэтому на видео, мы можем наложить любую информацию или создать блок, который будет служить каркасом для макета. Для этого создаем div блок с идентификатором customElement и придаем ему необходимые для нас свойства (это уже Вы сами все пропишите, что Вам потребуется).
Разработка и продвижение сайтов
Студия Дизайна LikeWeb.me
Также после видео или до него, мы можем создать отдельный блок и разместить там любую информацию. Весь код HTML приведен чуть ниже.
Разработка и продвижение сайтов
Студия Дизайна LikeWeb.me
Наши тарифы услуг на разработку сайтов Сайт-визитка / Сайт компании / Интернет-магазин / Landing-Page
Второй шаг. Стили CSS.
Переходим к более простому шагу и создаем файл стилей demo.css, в котором для нашего примера будут служить подобные свойства и стили.
.content < background: #ffffff; width: 960px; height: 700px; opacity: 0.7; margin: 0 auto; padding: 20px; >.content2 < width: 960px; margin: 20px auto; padding: 20px; >.content p < text-align: center; font-size: 30px; >.content div < margin: 10px auto; width: 400px; border: 1px solid #000000; >.logo < margin-left: 260px; margin-top: 50px; >.services < text-align: center; font-size: 20px; margin-top: 30px; >h1,h2
И самое пожалуй важное тут, добавить стили, которые будут адаптировать наше видео под разрешение экрана устройства.
#customElement < width: 100%; height: 700px; background: rgba(81, 150, 191, 0.60); position: relative; top: 0; left: 0; z-index: 0; background: url(«../images/ytplayer_img.jpg») no-repeat center center; background-size: cover; >
Как мы можем тут заметить, что все-таки видео грузиться не так быстро, как сами картинки, поэтому чтобы убрать белый фон вначале загрузки сайта, стоит приготовить и подогнать, определенную по дизайну картинку, которая будет служить начальным приветствием. Для нашего примера, я взял картинку из ролика данного сайта LikeWeb.me — Студии дизайна по разработке и продвижению сайтов.
Третий шаг. Скрипт JQuery. Документация.
Ну что ж, заключительный шаг, который нам предстоит сделать, так это описать скрипт video.js и немного разобраться в документации и настройке плагина фонового видео для сайта Youtube Player. На самом деле, код очень простой и пожалуй не требует особых объяснений по сравнению с документацией. В принципе, мы вызываем функцию JQuery с идентификатором video, который взаимосвязан с самим HTML блоком div.
jQuery(function () < jQuery(«#video»).YTPlayer(); >);
- Полноценной ссылкой http://www.youtube.com/watch?v=3McNFrqJMZw
- Сокращенной ссылкой http://youtu.be/3McNFrqJMZw
- Прямой ссылкой 3McNFrqJMZw
Как бы на этом пожалуй все, был рад поделиться полученными знаниями с Вами. Надеюсь, данный плагин поможет вдохновить и увеличить рост спроса трафика на Ваш сайт!
Источник: roothelp.ru
LiveInternetLiveInternet
ОткрыткиПерерожденный каталог открыток на все случаи жизни
Я — фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
Онлайн-игра «Empire»Преврати свой маленький замок в могущественную крепость и стань правителем величайшего королевства в игре Goodgame Empire. Строй свою собственную империю, расширяй ее и защищай от других игроков. Б
Онлайн-игра «Большая ферма»Дядя Джордж оставил тебе свою ферму, но, к сожалению, она не в очень хорошем состоянии. Но благодаря твоей деловой хватке и помощи соседей, друзей и родных ты в состоянии превратить захиревшее хозяйст
-Поиск по дневнику
-Подписка по e-mail
-Друзья
Друзья онлайн Дюанка Morskaja_-_Marishka
-Постоянные читатели
-Статистика
Создан: 03.05.2011
Записей: 4698
Комментариев: 38146
Написано: 48150
Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.
Цитата сообщения Prudent
Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.
Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.
Мы сейчас вставим YouTube видео на сайт и настроим его внешний вид и функции при помощи секретных фишек. А попросту зададим ему нужные параметры. Их не так то и много, но стандартное отображение ютуб плеера как то надоедает и хочется для своего сайта чего-то новенького. Когда мы хотим поставить на сайт видеоролик с видеохостинга YouTube, то в обычных настройках настройки. Но есть ещё ряд интересных фишек. Особенно они пригодятся, если вы делаете музыкальные открытки или одностраничные сайты. Вот стандартные youtube настройки плеера. Мы находимся на странице видеоролика, который собираемся вставлять на свой сайт. Жмём кнопку
- Поделиться
- HTML код
- снимаем галочку с раздела Показать похожие видео после завершения просмотра
- Выбираем размер или задаём его самостоятельно
А ещё можем поставить на сайт целый плейлист из ЮТуба. Для этого надо выбрать плейлист. Жмём для этого под значком канала — Творческая студия. 
В левой колонке в разделе Менеджер Видео, выбираем Плейлисты. 
На странице плейлиста кликаем Отправить -> HTML код и выбираем размер, как и в случае с видеороликом. 
На видеохостинге YouTube есть специальный сервис для добавления скрытых команд в код видеоплеера.
YouTube Player Demo для демонстрации возможностей ютуб плеера.
Для начала добавляем ID нашего видео. Вот пример кода, красным выделен ID.
В правой колонке показаны команды, которые мы можем задавать для YouTube видеоплеера. Например
- autoplay запустит ролик без дополнительных действий со стороны посетителя
- controls скроет нижнюю полосу управления плеером
Но я его не люблю, во-первых он малость глючный. Во вторых после того, как мы добавим все нужные изменения в своё видео, нам придётся ещё и менять код. Так как в том виде, который представлен там, он не срабатывает.
То есть получается овчина выделки не стоит. И поэтому предлагаю вам воспользоваться специальными кодами. Далее я покажу как это делать.
ВНИМАНИЕ! Каждый новый код, разделяем между собой значком аперсанд вставлять не надо!
После открытия страницы видим, что ролик начинается с заданной нами величины времени, а там, где он должен остановиться поставлена заглушка.
Как задать воспроизведение видео на автомате.
Опять же после знака ? вставляем autoplay=0. Разделяем start=80 showinfo=0 rel=0″ frameborder=»1″ allowfullscreen>
Бывает, что некоторые команды не срабатывают, и тогда можно попробовать их поменять местами или удалить какую-то из них. В коде, который выше мне пришлось это сделать, так как команда не хотела выполняться.
А вот как выглядит теперь наш видеоролик.
controls=0 Убираем элементы управления видеороликом, то есть нижнюю полосу прокрутки.
Теперь посетитель может запустить, если у вас не стоит автозапуск, или остановить видео. Прокрутить вперёд или назад, он не сможет. Вот наше произведение после добавления этой функции.
Как вы видите, полоса прокрутки исчезла. И теперь нужно кликнуть, чтобы его запустить, если конечно оно не поставлено у вас на автозапуск.
Если честно, терпеть не могу, когда убирают этот элемент. Ведь не видишь, сколько времени длится ролик, не можешь перемотать назад, если что-то пропустила, или вперёд, если тебе не интересно, что в данный момент там говорят.
И при таком раскладе, я тут же кликаю на логотип ЮТуба и перехожу туда, где я свободно могу управлять видео, а не оно мной. Но многие люди, особенно уверенные в востребованности того, что они говорят или показывают в видео, частенько ею пользуются.
А теперь ещё некоторые скрытые команды для ЮТуб видеоплеера.
Как их поставить вы уже знаете. Сначала новые команды, а внизу будут все те, которые я описала выше, для вашего удобства.
- vq=hd720 — Задаёт ролику качество HD, но имейте в виду, что он не будет проигрываться, у пользователей с медленным интернет соединением, так что лучше не злоупотреблять.
- loop=1 – Воспроизведение по кругу. Как только закончится, начнёт по новому кругу. Если вы настраиваете плейлист, то видеоролики будут воспроизводиться по очереди и работа плеера не закончится, пока пользователь не нажмёт стоп.
- fs=0 – Запрещает разворот на весь экран.
- cc_load_policy=1 – Отключает субтитры.
- iv_load_policy=3 – Отключает аннотации.
Далее параметры, которые я описала выше.
- frameborder=»1″ – Задаст бордюр видеоплееру, только серый
- код посередине — Выравнивает видео по центру
- start=N – Pолик будет воспроизводиться с заданного времени, время задавайте в секундах
- #t= — Начало запуска ролика, но время задаётся в минутах и секундах.( Пример #t=2м30s)
- end=N – Окончание воспроизведения, время тоже в секундах
- autoplay=0 – Автовопроизведение
- theme=light – Задаёт светлую тему для полосы управления
- modestbranding=1 – Скрывает лого ЮТуба, но не совсем, он появляется на верхней полосе
- showinfo=0 – Укроет саму верхнюю полосу с информацией о ролике вместе
- controls=0 – Удалит нижнюю полосу, вместе с элементами управления плеером
А теперь видеоурок с пошаговым описанием вышеописанных действий
Сервис для подбора параметров видео.
Этот сервис http://youtubecolor.ru/, для тех кто не хочет со всем этим заморачиваться. Надо ввести ссылку от видеоролика, который вы хотите сделать красивым. И выбрать параметры.
Сначала подгоняем размеры, для того, чтобы не было чёрных полос вокруг видеоролика.
Везде, где есть цвета, вы можете их выбрать при помощи палитры. Для того, чтобы она появилась, надо кликнуть по коду цвета. 
И после того, как выставите остальные параметры, вы их можете видеть на скриншоте. Нажимайте Скопировать код. Он автоматически сохранится в вашем буфере обмена. 
Код это старый и начинается тегом
А вот и ролик, обработанный на этом сервисе. Ничего особенного, просто нижнюю планку я сделала под цвет розочки 🙂 я же женщина. Длинный код, который получается на онлайн сервисе, не показываю, так речь о нём не шла, посмотрите сами, когда скопируете.
| Рубрики: | Все для блога |
Метки: YouTube
Понравилось: 1 пользователю
Источник: www.liveinternet.ru