Как добавить видео YouTube на сайт

Разместить на своём сайте, используя HTML-режим при редактировании статьи, предложенный IFRAME вида:

Как вставить несколько видео YouTube

Для того, чтобы снизить время загрузки страницы, а форму просмотра сделать более эстетичной на место, где мы хотели бы видеть наше видео [для Blogger, при редактировании или написании сообщения, нужно перейти на вкладку "HTML"], добавляем код: , где xFa2_PVMeDQ — идентификатор ролика. Где его взять? Посмотрите на первый скриншот, он выделен синим цветом. И вот статья как сделать картинки-миниатюры на видео (они же превью) Ютуб.

Что умеет скрипт

превью текущего видео делает затемнённым.
у превью просмотренного ролика появляется серая рамка благодаря this.style.backgroundColor='#555';.
при большом количестве изображений будет возможность их прокручивать (как ещё можно сделать).
если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите &autoplay=1.
ежели надо, чтобы ролик начался с определённого момента (как сделать), то следует добавить в тег img data-start="32". Вместо 32 поставить своё значение в секундах.
коли хочется, чтобы видео воспроизводилось до какого-то момента, то необходимо внести data-end="60". Вместо 60 написать своё значение в секундах.
резиновый, растягивается на всю ширину, поэтому не нужно рассчитывать размеры отдельно для каждой области.
если больше интересно вертикальное размещение изображений, то стиль может быть таким:

Несколько видео с текстом "серия 1"

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

HTML код ролика YouTube: расширенные возможности URL-адреса

Из предложенного кода следует взять идентификатор видеоролика, добавить его в форму ниже и настроить под свои нужды [см. допустимые параметры]:

82 комментария:

Tigra Вы такая умная!спасибо вам за ваш блог!Я тему даже на блоге не могу настроить( может подскажите что не так?если есть свободная минутка. NMitra Давайте посмотрим. Только профиль закрыт, поэтому я не вижу блога. Ал Каждый школьник знает о таком Al Kapone В видео похож на Майкла Корлеоне из фильма "Крестный отец" Mike K кстати немного потанцевал с бубном, чтобы видео могли смотреть и с Ios и других устройств, которые не поддерживают флеш, результат: Mike K (div />(iframe width="560" height="315" src="http://www.youtube.com/embed/m24IuebMXPo" frameborder="0" allowfullscreen>(/iframe>(/div>(script type="text/javascript"> swfobject.embedSWF( 'http://www.youtube.com/v/m24IuebMXPo&enablejsapi=1&rel=0&fs=1', 'containerYT', '425','344', '8',null,null, , );

function cargarVideo(id) (/script> Mikhail Спасибо, видео я установил, но оно нехорошо сливается с фоном, нельзя ли как нибудь рамочку приладить? NMitra Если путём скрипта описанного выше, то:

#reproductorYT

Если посредством IFRAME из YouTube, то окружите его div, например,

.youtube

Или любой другой на ваше усмотрение. сергей http://www.oneshotinc.ru/video.php

не работает переключение видео, в чем может быть причина? NMitra Вместо

и без строки <div не будет работать Анонимный Здравствуйте, Наташа.Спасибо за урок. А нельзя ли в Вашей конструкции сделать так, чтобы при выборе видео, страница возвращалась бы к плейеру. Например, при большом списке роликов посетителю приходиться отматывать страницу до начала, чтобы просмотреть выбранный ролик.Спасибо. NMitra Думаю так:

<a href="javascript:cargarVideo('ID_N');" onClick="scrollTo(0,0); return false;"><img src="http://img.youtube.com/vi/ID_N/1.jpg" /></a> Анонимный Здорово! Большое спасибо. А давайте ещё поусовершенствуем. Как сделать так, чтобы ролик прокручивался с определенного момента и до определенного момента?Спасибо. NMitra По моему, это уже решается на стороне YouTube. Анонимный У-у-у-у-у-у-у! Жалко. Анонимный Думаю так:

Здравствуйте, Наташа.Проблемка, к плейеру то "отматывает", а вот выбранный ролик не загружается. NMitra Вот это работает

<a href="#" onclick="cargarVideo('ID_N'); scrollTo(0,0); return false"> Анонимный Умничка! Спасибо. Анонимный Здравствуйте, Наташа.Извените, что пишу не по теме, но уже весь инет перерыл и не нашел ничего подходящего. Подскажите возможность, как позиционировать новое окно заданных размеров (например форму регистрации) на странице в Opere? А если есть кросс-браузерная конструкция, то вообще классно.Большое спасибо. NMitra Либо position: absolute;, либо position: relative. http://shpargalkablog.ru/2011/04/css-nalozhenie.html Хотя вопроса не поняла: почему именно в Опере, относительно чего позиционировать? Анонимный Отписался на мыло, чтобы не засорять пост. Анонимный А скажите, пожалуйста, как сделать, чтобы вместе с видео загружалось с его описание с Ютуба, дата публикации и т.д.? NMitra К сожалению, не могу сказать, обратитесь к разработчику скрипта. Анонимный Кто разработчик скрипта? NMitra http://911-need-code-help.blogspot.com/ В статье ссылка на пост. Игорь Скажите пожалуйста, а как можно выделить посещенные ролики в списке от непосещенных (например изменить цвет рамки), чтобы посетителю было проще ориентироваться. Всяко пробовал, чет не получается.Спасибо. NMitra После скрипта замените код, например на такой:

this.style.backgroundColor='#555' - меняет фон картинки. Mikhail Yutkin Вставлял код в страницу редактирования стандартного материала Joomla. Вставилось удачно, но не работает переключение ролликов под основным главным роликом. т.е. как я понял я не сумел подключить script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"> script правильно. В html редакторе материала нету тега 'head' и если эту строку просто вставлять вначале кода, то она затирается и естественно скрипт не подхватится.

Подскажите, что делать? Если нужно вставить эту строчку в какой-то локальный файл, то в какой? Спасибо NMitra Есть более простой вариант без подключения библиотек

Принцип тот же. Пример, http://shpargalkablog.ru/2012/11/perelinkovka.html Alex Zest А скрипт зачем подключается, -- достаточно вставить - то что считывается при клике правой мышей - под пунктом"Copy embed html" - или такой же записью на национальном языке---------------------в случае ее отсутствия можно просто вставить ссылку через тег embed с указанием на исполняемый MIME-тип плэйеру NMitra О, я так с MIME-тип и не разобралась. Ссылку в студию с работающем примером. ))) Анонимный А для чего такая сложность если можно просто в страницу HTML вставить код например нужно только в начале открыть а в конце закрыть тег айфрэйм width="600" height="480" src="http://www.youtube.com/embed/M973nToRmjo" frameborder="0" ссылку на видео замените на свою и всё вот пример http://flinders.ru NMitra Никакой сложности. Именно тот код, который вы написали и предлагает сам YouTube. Но, когда видео несколько, то мне больше импонирует объединить их вышеприведённым способом. Анонимный Здравствуйте, Наташа. Скажите как вставить в видио с HTML кодом код своей странички чтоб после просмотра видио сразу открывалась регистрация NMitra Здравствуйте, можно таймер подключить. И, скажем, по прошествии 2 минут убирать IFRAME и добавлять форму регистрации. Анонимный а можно этот код переделать так чтоб выглядел как здесь? : http://buxodrom.blogspot.com/2014/01/vk.html NMitra Я вас поняла, позже посмотрю. NMitra Сделала, см. статью. Анонимный Подскажите пожалуйста, как это будет выглядеть, если нужно несколько таких списков на странице. Анонимный Здравствуйте. Спасибо за урок. Подскажите, а как сделать так, чтобы вместо скринов ютуба, в маленьких окошках, можно было загрузить свои картинки. Как и что добавить? Спасибо. NMitra Анонимный №1,

Чтобы прописать стиль один раз <div нужно заменить на <div />В стилях вместо #video12 применить .video12

📎📎📎📎📎📎📎📎📎📎