Плеер ЮТуб секретные фишки. Как вставить YouTube видео на сайт.

12 Сентябрь 2014
YouTube






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

Когда мы хотим поставить на сайт видеоролик с видеохостинга YouTube, то в обычных настройках настройки. Но есть ещё ряд интересных фишек. Особенно они пригодятся, если вы делаете музыкальные открытки или одностраничные сайты.

Вот стандартные youtube настройки плеера.

Мы находимся на странице видеоролика, который собираемся вставлять на свой сайт. Жмём кнопку

  • Поделиться
  • HTML код
  • снимаем галочку с раздела Показать похожие видео после завершения просмотра
  • Выбираем размер или задаём его самостоятельно

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

А ещё можем поставить на сайт целый плейлист из ЮТуба. Для этого надо выбрать плейлист. Жмём для этого под значком канала — Творческая студия.

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

 

В левой колонке в разделе Менеджер Видео, выбираем Плейлисты.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

На странице плейлиста кликаем — Отправить -> HTML код и выбираем размер, как и в случае с видеороликом.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

На видеохостинге YouTube есть специальный сервис для добавления скрытых команд в код видеоплеера.

 YouTube Player Demo для демонстрации возможностей ютуб плеера.

https://developers.google.com/youtube/youtube_player_demo

Для начала добавляем ID нашего видео. Вот пример кода, красным выделен ID.

http://www.youtube.com/watch?v=7BcBeutC1t4

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

В правой колонке показаны команды, которые мы можем задавать для YouTube видеоплеера. Например

  • autoplay запустит ролик без дополнительных действий со стороны посетителя
  • controls скроет нижнюю полосу управления плеером

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

То есть получается овчина выделки не стоит. И поэтому предлагаю вам воспользоваться специальными кодами. Далее я покажу как это делать.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

ВНИМАНИЕ! Каждый новый код, разделяем между собой значком &. Получить первый значок можно в английской раскладке клавиатуры, нажатием на клавишу Shift + 7. Не пишите его без amp; — иначе сайт может не пройти проверку на валидность.

Пример смотрите в кодах видео ниже. Будьте осторожны со значками, даже утеря кавычки может спровоцировать  отсутствие ролика.

Но если такое случилось, не беда! Копируйте код видеролика и заново и работайте с ним.

Как задать время воспроизведения ролика от и до.

Для того, чтобы задать с какой секунды видео будет воспроизводиться добавляем 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&amp;end=180&amp;rel=0″ frameborder=»0″ allowfullscreen></iframe></center>






Обратите внимание, что перед кавычкой, там где последняя команда, перед значением frameborder=»0″ —  &amp; вставлять не надо!

После открытия страницы видим, что ролик начинается с заданной нами величины времени, а там, где он должен остановиться поставлена заглушка.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

Как задать воспроизведение видео на автомате.

Опять же после знака ? вставляем autoplay=1. Разделяем &amp;. И как только страницу откроет посетитель, видеоролик запускается. Не советую ставить на блог, иначе может произойти глюк и все ролики на главной начнут воспроизведение.

Временной промежуток при этом можно оставить.

 

Как изменить внешний вид 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&amp;rel=0″ frameborder=»1″ allowfullscreen></iframe></center>

И вот какая получается при этом картина, ролик будет стоять ровно, небольшой бордюрчик по краю и тема на нижней полосе светлая, так как мы добавили значение theme=light.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

modestbranding=1 поможет крыть логотип Ютуба с панели. Тогда он появится на верхней панели, которую мы тоже можем скрыть при помощи showinfo=0

<center><iframe width=»600″ height=»338″ src=»//www.youtube.com/embed/7BcBeutC1t4?

start=80&amp;end=180&amp;showinfo=0&amp;theme=light&amp;rel=0″ frameborder=»1″ allowfullscreen></iframe></center>

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

 

А вот как выглядит теперь наш видеоролик.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

controls=0 Убираем элементы управления видеороликом, то есть нижнюю полосу прокрутки.

Теперь посетитель может запустить, если у вас не стоит автозапуск, или остановить видео. Прокрутить вперёд или назад, он не сможет. Вот наше произведение после добавления этой функции.

Как вы видите, полоса прокрутки исчезла. И теперь нужно кликнуть, чтобы его запустить, если конечно оно не поставлено у вас на автозапуск.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

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

И при таком раскладе, я тут же кликаю на логотип ЮТуба и перехожу туда, где я свободно могу управлять видео, а не оно мной. Но многие люди, особенно уверенные в востребованности того, что они говорят или показывают в видео, частенько ею пользуются.

А теперь ещё некоторые скрытые команды для ЮТуб видеоплеера.

Как их поставить вы уже знаете. Сначала новые команды, а внизу будут все те, которые я описала выше, для вашего удобства.

  • 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/, для тех кто не хочет со всем этим заморачиваться. Надо ввести ссылку от видеоролика, который вы хотите сделать красивым. И выбрать параметры.

Сначала подгоняем размеры, для того, чтобы не было чёрных полос вокруг видеоролика.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

Везде, где есть цвета, вы можете их выбрать при помощи палитры. Для того, чтобы она появилась, надо кликнуть по коду цвета.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

И после того, как выставите остальные параметры, вы их можете видеть на скриншоте. Нажимайте — Скопировать код. Он автоматически сохранится в вашем буфере обмена.

 

Как вставить YouTube видео на сайт. Секретные фишки ЮТуб плеера.

 

Код это старый и начинается тегом <object. Дело в том, что некоторые почтенный сайты поддерживают только и видео HTML5 они не принимают. Он раза в 3 длиннее, ну ничего страшного, зато быстро. И получается красиво!

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


На этом всё, теперь вы знаете как можно изменить внешний вид и настройки в плеере ЮТуб.

Жду ваших комментариев, мне интересно ваше мнение.

Вы можете прочитать другие  статьи,
для этого воспользуйтесь Картой сайта.
А также получать новые статьи прямо на Ваш почтовый ящик.
Введите свой E-mаil:

 


С Уважением, Татьяна Чиронова   






  

Сохраните пост к себе на стенку в соцсети



 


А здесь можно публиковать анонсы постов по теме:  


 










На ту же тему
Обсуждение: 23 комментария
  1. Скажите, а как настроить плеер таким образом, чтобы люди не могли с вашего сайта, где установлен ролик ютуб, перейти на канал ютуб для просмотра видео там? т.е. нужно сделать так, чтобы люди смотрели видео только лишь с сайта.

  2. Спасибо, Татьяна. Все действительно разжевано до мелочей. Скоро планирую видеоролики снимать для блога — буду использовать только ваши инструкции!!!

  3. Здравствуйте, Татьяна! Действительно очень полезная статья, надо будет попробовать. Спасибо! И удачи Вам…

  4. Здравствуйте Татьяна! Очень благодарна за секретные фишки! А можно вставить видео в сплошную рамку,с бордюрами 5 мм с 3-х сторон, а внизу пошире 15 мм и с надписью о видео? Или для этого нужна программа? Я для своего сайта в новостях хочу обрамить видео в рамку!

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

  5. Михаил:

    Доброго времени суток, Татьяна! Спасибо за полезную статью — и грамотно, и четко и по существу. Это редкость. Скажите, пожалуйста, есть ли возможность изменить вид плейлиста от ютьюб. Поясню: я хочу вставить на сайт плейлист с ютьюба. При вставке собственно список сам не виден. Чтобы его увидеть, надо нажать на кнопку «Плейлист». Можно ли как то сделать так, чтобы при открытии страницы сразу был виден список с превью, хорошо бы еще чтобы они не загораживали все видео))))).

  6. Алексей:

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

  7. Артур:

    Татьяна, здравствуйте! Самый главный вопрос?))) Какой программой пользуетесь для создания видеоуроков? Интересует запись с экрана!

    • Здравствуйте, для создания видеоуроков использую программу Camtasia Studio.

      • Артур:

        Спасибо! А микрофон внешний? Какого качества? У меня тихий звук получается с внешнего микрофона и шумы вентилятора ноутбука(

        • А я записываю с ноутбука, со встроенного микрофона, шумы конечно есть кое какие, но в принципе приемлемо.
          Вы, когда записываете, сделайте звук записи потише. А уже потом в процессе редактирования увеличите звук и удалите шум.

  8. Panov:

    Очень полезно,спасибо вам большое! У меня первый раз сразу получился!

  9. Татьяна, спасибо. Знала самый минимум.
    Хотела ещё вот о чём давно сказать. (Не решалась раньше, — думала, что это у меня глюк какой-то.) При переходе по почтовой ссылке на Ваши статьи открывается просто белое поле. И давно. Сейчас просто перешла на главную, а потом на эту статью…

  10. Маргарита Минкова:

    Танечка! Я просто в восторге от твоей статьи! Многое знала, но такого подробного расклада нигде не встречала. Эта тема очень актуальна, т.к. видео сейчас используется на многих ресурсах для рекламы и бизнеса, и мероприятий, а такое использование «штучек» делает его притягательным на сайте. Спасибо огромное!!!

  11. Спасибо, Татьяна, с удовольствием делюсь).

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Свежие записи
Как снизить нагрузку на CPU хостинга cайта вордпресс
Как снизить нагрузку на CPU хостинга cайта вордпресс
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Free Traffic Club — бесплатная реклама в Фейсбук
Free Traffic Club — бесплатная реклама в Фейсбук
Как правильно установить Savefrom net для Google Chrome
Как правильно установить Savefrom net для Google Chrome
≡ 

Дешевый хостинг

Внимание!

Скопируйте промокод 2d7124-10

со скидкой 10% и реф. бонусом 10%

Интернет технологии для вас © 2017 ·   Войти Наверх