![](//img-fotki.yandex.ru/get/5114/173501822.2b/0_105612_f03faf63_L.jpg)
А ещё можем поставить на сайт целый плейлист из ЮТуба. Для этого надо выбрать плейлист. Жмём для этого под значком канала — Творческая студия.
![](//img-fotki.yandex.ru/get/5108/173501822.2b/0_105613_86c4c5b0_orig.jpg)
В левой колонке в разделе Менеджер Видео, выбираем Плейлисты.
![](//img-fotki.yandex.ru/get/4811/173501822.2b/0_105614_98afd9d5_L.jpg)
На странице плейлиста кликаем Отправить -> HTML код и выбираем размер, как и в случае с видеороликом.
![](//img-fotki.yandex.ru/get/5113/173501822.2b/0_105615_c6765501_L.jpg)
На видеохостинге YouTube есть специальный сервис для добавления скрытых команд в код видеоплеера.
YouTube Player Demo для демонстрации возможностей ютуб плеера.
https://developers.google.com/youtube/youtube_player_demo
Для начала добавляем ID нашего видео. Вот пример кода, красным выделен ID.
http://www.youtube.com/watch?v=7BcBeutC1t4
![](//img-fotki.yandex.ru/get/4811/173501822.2b/0_105616_55530e4a_L.jpg)
В правой колонке показаны команды, которые мы можем задавать для YouTube видеоплеера. Например
- autoplay запустит ролик без дополнительных действий со стороны посетителя
- controls скроет нижнюю полосу управления плеером
Но я его не люблю, во-первых он малость глючный. Во вторых после того, как мы добавим все нужные изменения в своё видео, нам придётся ещё и менять код. Так как в том виде, который представлен там, он не срабатывает.
То есть получается овчина выделки не стоит. И поэтому предлагаю вам воспользоваться специальными кодами. Далее я покажу как это делать.
![](//img-fotki.yandex.ru/get/5110/173501822.2b/0_105617_ab21eed5_L.jpg)
ВНИМАНИЕ! Каждый новый код, разделяем между собой значком аперсанд & . Получить его можно в английской раскладке клавиатуры, нажатием на клавишу Shift + 7. Пример смотрите в кодах видео ниже. Будьте осторожны со значками, даже утеря кавычки может спровоцировать отсутствие ролика.
Но если такое случилось, не беда! Копируйте код видеролика заново и работайте с ним.
Как задать время воспроизведения ролика от и до.
Для того, чтобы задать с какой секунды видео будет воспроизводиться добавляем start=N. После знака ? . Вместо N поставим с какой секунды он будет запускаться. Например, 1 минута 20 секунд, значит ставим 80 (start=80), помечено в коде синим.
И где оно будет останавливаться, значение end=N. Например через 3 минуты, значит 180 (end=180), в коде сиреневый.
<center><iframe width=»600″ height=»338″ src=»//www.youtube.com/embed/7BcBeutC1t4?start=80&end=180&rel=0″ frameborder=»0″ allowfullscreen></iframe></center>
Обратите внимание, что перед кавычкой, там где последняя команда, перед значением frameborder=»0″ — & вставлять не надо!
После открытия страницы видим, что ролик начинается с заданной нами величины времени, а там, где он должен остановиться поставлена заглушка.
![](//img-fotki.yandex.ru/get/5105/173501822.2b/0_105618_7ef33872_L.jpg)
Как задать воспроизведение видео на автомате.
Опять же после знака ? вставляем autoplay=1. Разделяем &. И как только страницу откроет посетитель, видеоролик запускается. Не советую ставить на блог, иначе может произойти глюк и все ролики на главной начнут воспроизведение.
Временной промежуток при этом можно оставить.
Как изменить внешний вид youtube видеоплеера.
И точно так же вставляем в html режиме полученный код на сайт.
Теперь зададим ему
- Бордюр, для этого в коде меняем значение в слове frameborder=»0″, 0 на 1 (цвет параметра в записи — синий)
- и выровняем по центру сам ролик, для этого заключим код в теги, этот ставим вначале <center>. А этот </center> , в конце (красный)
<center><iframe width=»600″ height=»338″ src=»//www.youtube.com/embed/7BcBeutC1t4?rel=0″ frameborder=»1″ allowfullscreen></iframe></center>
А теперь сделаем белую тему внизу, добавляем в код значение theme=light (помечено зелёным).
Вот такой должен у нас получиться код. Смотрите, чтобы не было пробелов в коде, и других недочётов, а то он может не сработать. В видеоуроке я показываю это.
<center><iframe width=»600″ height=»338″ src=»//www.youtube.com/embed/7BcBeutC1t4? theme=light&rel=0″ frameborder=»1″ allowfullscreen></iframe></center>
И вот какая получается при этом картина, ролик будет стоять ровно, небольшой бордюрчик по краю и тема на нижней полосе светлая, так как мы добавили значение theme=light.
![](//img-fotki.yandex.ru/get/5110/173501822.2b/0_105619_ccbdfee9_L.jpg)
modestbranding=1 поможет крыть логотип Ютуба с панели. Тогда он появится на верхней панели, которую мы тоже можем скрыть при помощи showinfo=0
<center><iframe width=»600″ height=»338″ src=»//www.youtube.com/embed/7BcBeutC1t4?
&start=80&end=180&showinfo=0&theme=light&rel=0″ frameborder=»1″ allowfullscreen></iframe></center>
Бывает, что некоторые команды не срабатывают, и тогда можно попробовать их поменять местами или удалить какую-то из них. В коде, который выше мне пришлось это сделать, так как команда не хотела выполняться.
А вот как выглядит теперь наш видеоролик.
![](//img-fotki.yandex.ru/get/5114/173501822.2b/0_10561a_597d319b_L.jpg)
controls=0 Убираем элементы управления видеороликом, то есть нижнюю полосу прокрутки.
Теперь посетитель может запустить, если у вас не стоит автозапуск, или остановить видео. Прокрутить вперёд или назад, он не сможет. Вот наше произведение после добавления этой функции.
Как вы видите, полоса прокрутки исчезла. И теперь нужно кликнуть, чтобы его запустить, если конечно оно не поставлено у вас на автозапуск.
![](//img-fotki.yandex.ru/get/5112/173501822.2b/0_10561b_e4b86ed0_L.jpg)
Если честно, терпеть не могу, когда убирают этот элемент. Ведь не видишь, сколько времени длится ролик, не можешь перемотать назад, если что-то пропустила, или вперёд, если тебе не интересно, что в данный момент там говорят.
И при таком раскладе, я тут же кликаю на логотип ЮТуба и перехожу туда, где я свободно могу управлять видео, а не оно мной. Но многие люди, особенно уверенные в востребованности того, что они говорят или показывают в видео, частенько ею пользуются.
А теперь ещё некоторые скрытые команды для ЮТуб видеоплеера.
Как их поставить вы уже знаете. Сначала новые команды, а внизу будут все те, которые я описала выше, для вашего удобства.
- vq=hd720 — Задаёт ролику качество HD, но имейте в виду, что он не будет проигрываться, у пользователей с медленным интернет соединением, так что лучше не злоупотреблять.
- loop=1 – Воспроизведение по кругу. Как только закончится, начнёт по новому кругу. Если вы настраиваете плейлист, то видеоролики будут воспроизводиться по очереди и работа плеера не закончится, пока пользователь не нажмёт стоп.
- fs=0 – Запрещает разворот на весь экран.
- cc_load_policy=1 – Отключает субтитры.
- iv_load_policy=3 – Отключает аннотации.
Далее параметры, которые я описала выше.
- frameborder=»1″ – Задаст бордюр видеоплееру, только серый
- <center> код посередине </center> — Выравнивает видео по центру
- start=N – Pолик будет воспроизводиться с заданного времени, время задавайте в секундах
- #t= — Начало запуска ролика, но время задаётся в минутах и секундах.( Пример #t=2м30s)
- end=N – Окончание воспроизведения, время тоже в секундах
- autoplay=1 – Автовопроизведение
- theme=light – Задаёт светлую тему для полосы управления
- modestbranding=1 – Скрывает лого ЮТуба, но не совсем, он появляется на верхней полосе
- showinfo=0 – Укроет саму верхнюю полосу с информацией о ролике вместе
- controls=0 – Удалит нижнюю полосу, вместе с элементами управления плеером
А теперь видеоурок с пошаговым описанием вышеописанных действий
Сервис для подбора параметров видео.
Этот сервис http://youtubecolor.ru/, для тех кто не хочет со всем этим заморачиваться. Надо ввести ссылку от видеоролика, который вы хотите сделать красивым. И выбрать параметры.
Сначала подгоняем размеры, для того, чтобы не было чёрных полос вокруг видеоролика.
![](//img-fotki.yandex.ru/get/5108/173501822.2b/0_10561d_a0bbefcf_L.jpg)
Везде, где есть цвета, вы можете их выбрать при помощи палитры. Для того, чтобы она появилась, надо кликнуть по коду цвета.
![](//img-fotki.yandex.ru/get/5114/173501822.2b/0_10561c_5d2352d2_L.jpg)
И после того, как выставите остальные параметры, вы их можете видеть на скриншоте. Нажимайте Скопировать код. Он автоматически сохранится в вашем буфере обмена.
![](//img-fotki.yandex.ru/get/5110/173501822.2b/0_10561e_afe9d300_L.jpg)
Код это старый и начинается тегом <object. Дело в том, что некоторые почтенный сайты поддерживают только и видео HTML5 они не принимают. Он раза в 3 длиннее, ну ничего страшного, зато быстро. И получается красиво!
А вот и ролик, обработанный на этом сервисе. Ничего особенного, просто нижнюю планку я сделала под цвет розочки :) я же женщина. Длинный код, который получается на онлайн сервисе, не показываю, так речь о нём не шла, посмотрите сами, когда скопируете.
На этом всё, теперь вы знаете как можно изменить внешний вид и настройки YouTube видеоплеера.