YouTube оказывает огромную услугу всем сайтам, предоставляя возможность размещения своих видео на других ресурсах. Конечно же, таким образом, убивается сразу два зайца – видеохостинг YouTube расходится далеко за свои пределы, в то время как сайт имеет возможность транслировать видео, не забивая и не перегружая свои сервера. В данной статье пойдет речь о том, как вставить видео на сайт с Ютуба.
Поиск и настройка кода для вставки видео
Перед тем, как лезть в дебри кодинга и рассказывать, как вставлять проигрыватель Ютуба в сам сайт, стоит рассказать, где брать этот самый проигрыватель, а точнее, его HTML-код. Помимо этого, нужно знать, как его настроить, чтобы сам плеер смотрелся органично на вашем сайте.
Шаг 1: Поиск HTML-кода
Для вставки ролика к себе на сайт вам необходимо знать его HTML-код, который и предоставляет сам YouTube. Во-первых, вам необходимо перейти на страницу с видео, которое вы хотите позаимствовать. Во-вторых, пролистать страницу чуть ниже. В-третьих, под роликом вам необходимо нажать на кнопку «Поделиться», после чего перейти во вкладку «HTML-код».
Как загрузить на сайт ролик в формате Youtube Shorts
Вам остается всего лишь взять этот код (скопировать, «CTRL+C»), и вставить («CTRL+V»)его в код своего сайта, в желаемое место.
Шаг 2: Настройка кода
Если размер самого видео вам не подходит и вы хотите его изменить, то Ютуб эту возможность предоставляет. Вам следует всего лишь нажать на кнопку «Еще», чтобы открыть специальную панель с настройками.
Здесь вы увидите, что можно изменить размер видео, используя выпадающий список. Если же вы хотите задать размеры вручную, то в списке выберете пункт «Другой размер» и введите его самостоятельно. Заметьте, что по заданию одного параметра (высоты или ширины), второй подбирается автоматически, тем самым сохраняя пропорции ролика.
Здесь вы можете задать также ряд других параметров:
- Показать похожие видео после завершения просмотра.
Установив галочку напротив этого параметра, после просмотра ролика на вашем сайте до конца, зрителю предоставят выборку из других роликов, схожих по тематике, но не зависящих от вашего предпочтения. - Показать панель управления.
Если галочку убрать, то на вашем сайте проигрыватель будет без основных элементов: кнопки паузы, регулировки громкости и возможности промотать время. К слову, рекомендуется этот параметр всегда оставлять включенным для удобства пользователя. - Показать название видео.
Убрав этот значок, пользователь, посетивший ваш сайт и включивший на нем ролик, не увидит его названия. - Включить режим повышенной конфиденциальности.
Данный параметр никак не повлияет на отображение проигрывателя, однако если его активировать, Ютуб будет сохранять информацию о пользователях, которые посетили ваш сайт в том случае, если они просмотрели этот ролик. В целом никакой опасности это не несет, поэтому можете убирать галочку.
Вот и все настройки, которые можно провести на сайте YouTube. Вы можете смело брать измененный HTML-код и вставлять его на свой сайт.
Варианты вставки видеоролика на сайт
Многие пользователи, решая создать свой сайт не всегда знают, как вставлять ролики с Ютуба на него. А ведь данная функция позволяет не только разнообразить веб-ресурс, но и улучшить технические стороны: нагрузка на сервера становится в разы меньше, так как она полностью идет на сервера Ютуба, а в довесок к этому на них остается куча свободного места, ведь некоторые видеозаписи достигают громадного размера, исчисляемого в гигабайтах.
Способ 1: Вставка на HTML-сайт
Если ваш ресурс написан на HTML, то для вставки видео с Ютуба вам нужно открыть его в каком-то текстовом редакторе, например, в Notepad++. Также для этого вы можете использовать и обыкновенный блокнот, который есть на всех версиях Windows. После открытия найдите во всем коде место, куда хотите поместить видео, и вставьте ранее скопированный код.
На изображении ниже вы можете просмотреть пример такой вставки.
Способ 2: Вставка в WordPress
Если вы хотите поместить ролик с Ютуба на сайт с помощью WordPress, то делается это еще проще, чем на HTML-ресурсе, так как нет необходимости использовать текстовый редактор.
Итак, чтобы вставить видео, откройте сначала сам редактор WordPress, после чего переключите его в режим «Текст». Отыщите место, в котором вы хотите разместить видео, и вставьте туда HTML-код, который вы взяли с Ютуба.
К слову, в виджеты видео можно вставлять аналогичным способом. А вот в элементы сайта, которые не могут быть отредактированы с аккаунта администратора, вставить ролик на порядок сложнее. Чтобы это сделать, нужно редактировать файлы темы, что крайне не рекомендуется делать пользователям, которые не разбираются во всем этом.
Способ 3: Вставка на сайты Ucoz, LiveJournal, BlogSpot и им подобные
Здесь все просто, нет никакого отличия от тех способов, которые приведены ранее. Вам стоит лишь обратить внимание на то, что сами редакторы кода могут отличаться. Вам всего-навсего нужно его найти и открыть в HTML-режиме, после чего вставить HTML-код проигрывателя YouTube.
Ручная настройка HTML-кода плеера после его вставки
Как настроить вставляемый проигрыватель на сайте YouTube было рассмотрено выше, но это далеко не все настройки. Вы можете задать некоторые параметры вручную, изменяя сам HTML-код. Также данные манипуляции можно проводить как во время вставки видео, так и после нее.
Изменение размера плеера
Может случиться так, что после того, как вы уже настроили проигрыватель и вставили его на свой сайт, открывая страницу, вы обнаруживаете то, что его размер, мягко говоря, не соответствует желаемому результату. К счастью, можно все исправить, внеся правки в HTML-код проигрывателя.
Необходимо знать лишь два элемента и то, за что они отвечают. Элемент «width» — это ширина вставляемого проигрывателя, а «height» — высота. Соответственно, в самом коде вам нужно заменить значения этих элементов, которые указаны в кавычках после знака равно, для изменения размера вставляемого плеера.
Главное, будьте внимательны и подбирайте нужные пропорции, чтобы плеер в итоге не был сильно растянут или, наоборот, сплюснут.
Автоматическое воспроизведение
Взяв HTML-код с Ютуба, вы можете его немного переделать, чтобы при открытии вашего сайта у пользователя видео воспроизводилось автоматически. Для этого необходимо использовать команду «cc_lang_pref=ru» без кавычек. Он отвечает за выбор языка субтитров. Как можно заметить, в примере стоит значение «ru», что означает – выбран русский язык субтитров. Второй – «https://lumpics.ru/insert-video-website-from-youtube/» target=»_blank»]lumpics.ru[/mask_link]
Как вставить видео на сайт?
Хотели добавить видео на сайт, но не знали как это сделать? В этой статье мы вам расскажем о самых популярных современных видеохостингах и о способах размещения видеороликов.
Зачем видео на сайте?
Для начала разберем зачем вообще нужно видео на сайте. Сейчас с развитием технологий многие люди предпочитаю смотреть и слушать, а не читать, хороши ли это или плохо не нам решать, но размещение видео на сайте сыграет вам на руку. Вы можете снимать видеобращения к посетителям сайта, рассказывать и показывать ваши товары, проводить видеоуроки или различные демонстрации, а так же размещать видео, связанные с тематикой вашего сайта. Например, на днях я искал информацию по душевым кабинам, в поиске выдает множество страниц с текстом, и особняком стоит 1 видео, оно сразу выделяется в поиске и на него хочется кликнуть. А главное, оно реально полезное.
На своем сайте вы можете рассказывать о чем угодно, будь то новые киноленты, тут не обойтись без трейлеров к фильмам, или у вас сайт посвящен спортивной тематике, тогда вам будет нужно выкладывать видео о прошедших соревнованиях с интересными моментами . Размещать вы можете что угодно главное не забывайте о защите авторских прав и законах о цензуре и пиратстве.
Как вставить видео на сайт?
Практически на любую страницу вашего сайта можно добавить видео. Это делается в несколько шагов.
Первый шаг зависит от того, где находится видео. Если оно не опубликовано в Интернете, а хранится только у вас на компьютере, то сначала вам нужно выложить его в Интернет. Это можно сделать с помощью вышеперечисленных видеоресурсов YouTube, Vimeo и т.п. Также видео можно выкладывать на своей странице в Вконтакте.
Когда видео находится в Интернете (неважно, было ли оно там, или вы сами только что его туда добавили), вам нужно получить его код. Мы вам покажем как этот код добывается на примере Youtube, rutube, vimeo и Вконтакте, отличия здесь минимальны.
Как вставить видео с Youtube на сайт
Youtube – самый популярный международный видеохостинг, на котором размещают свои видео все, начиная от мировых знаменитостей и телешоу, заканчивая самыми простыми людьми, которым есть чем поделиться. Youtube занимает 3е место в мире по числу посетителей, ежедневно здесь совершают около 4 млрд просмотров. Ютуб позволяет хранить видео, смотреть, комментировать и делиться с другими пользователями, в том числе и размещать на сайте.
В Youtube это делается следующим образом:
- Под каждым видео есть кнопка «Поделиться», нажмите ее;
- Выберите пункт «HTML-код»;
- Выберите нужный размер для видео;
- Скопируйте код и разместите его на странице вашего сайта.
Как вставить видео с Rutube на сайт
Rutube – российский аналог youtube, так же позволяет размещать, хранить, смотреть и делиться видео. По данным администрации ресурс ежедневно посещают 15 миллионов пользователей. Здесь имеют свои каналы популярные ТВ-каналы, такие как Первый канал, Россия 2, ТНТ, СТС, Пятница, НТВ и многие другие, а так же отечтественные сериалы и передачи.
В Rutube это делается следующим образом:
- Под каждым видео есть кнопка «код вставки», нажмите ее;
- Скопируйте код.
Как вставить видео с Vimeo на сайт
Vimeo – это бесплатный видеохостинг, на котором можно так же выкладывать видео (до 500кб в неделю бесплатно, с платным аккаунтом до 20гб), смотреть, комментировать, лайкать и делиться ими со своими друзьями, положительным моментом является отсутствие рекламы. К сожалению пока нет русскоязычной версии,интерфейс доступен на: английском, испанском, французском, немецком и японском. Видео здесь делятся на категории: мода, музыка, искусство, анимация, юмор, еда и т.п., так что без труда можно поискать видео на интересующую тематику. Ресурс обладает современным дизайном и функционалом, особенно популярен среди молодежи.
В Vimeo это делается следующим образом:
- Поднесите мышку к видеоплееру;
- В верхем правом углу появятся 3 кнопки, нажмите «Share»;
- В появившемся окошке скопируйте код «Embed».
Как вставить видео с Вконтакте на сайт
Вконтакте – наша отечественная социальная сеть, которая позволяет добавлять и хранить видео, а так же смотреть, делиться, комментировать, в общем все в правилах жанра.
Здесь скопировать код видео можно двумя способами.
1. Включите видеопроигрыватель, правой кнопкой мышки нажмите на видео и из выпадающего списка выберите «копировать html-код».
2. Под каждым видео есть кнопка «Поделиться», нажмите ее.
3. В появившемся окошке нажмите на вкладку «экспортировать» и скопируйте код для вставки.
Теперь, вам нужно разместить скопированный код на сайте. Обратите внимание, что каким бы видеохостингом вы не воспользовались, дальнейшие шаги будут одинаковы для всех.
Рассмотрим размещение видео на примере конструктора сайтов Nubex.
1. Зайдите в админку сайта и откройте редактирование той страницы, на которую хотите поместить видео (или создайте новую страницу). В поле для вставки текста нажмите кнопку «Источник».
2. У вас откроется HTML-код страницы. Найдите место в тексте, в которое хотите поместить видеоролик, и вставьте туда тот код, который вы скопировали из YouTube (или с другого сайта, на котором вы разместили видео).
3. Сохраните страницу, нажав на кнопку внизу.
Видео будет выглядеть следующим образом:
Поздравляем! Вы смогли добавить видео на сайт самостоятельно. Надеемся посетителям вашего сайта оно понравится.
Источник: nubex.ru
Как добавить видео YouTube на сайт
На странице показа ролика нажать на «Поделиться» — «HTML-код»
Разместить на своём сайте, используя HTML-режим при редактировании статьи, предложенный IFRAME вида:
Как вставить несколько видео YouTube
Для того, чтобы снизить время загрузки страницы, а форму просмотра сделать более эстетичной на место, где мы хотели бы видеть наше видео [для Blogger, при редактировании или написании сообщения, нужно перейти на вкладку «HTML»], добавляем код:
#video12 < position: relative; margin-bottom: 110px; padding-bottom: 75%; >#video12 iframe < position: absolute; width: 100%; height: 100%; >#video12 div < position: absolute; bottom: -110px; width: 100%; height: 100px; padding: 0; overflow-x: auto; white-space: nowrap; text-align: center; >#video12 img < height: calc(100% — (5px + 1px)*2 — 10px); margin: 0 5px 0 0; padding: 5px; border: 1px solid #555; border-radius: 5px; opacity: .7; >#video12 img:hover < opacity: 1; cursor: pointer; >#video12 img:focus
где xFa2_PVMeDQ — идентификатор ролика. Где его взять? Посмотрите на первый скриншот, он выделен синим цветом. И вот статья как сделать картинки-миниатюры на видео (они же превью) Ютуб.
Что умеет скрипт
- превью текущего видео делает затемнённым.
- у превью просмотренного ролика появляется серая рамка благодаря this.style.backgroundColor=’#555′;.
- при большом количестве изображений будет возможность их прокручивать (как ещё можно сделать).
- если не нужно, чтобы ролики начинались сразу после нажатия на превью, уберите 32″. Вместо 32 поставить своё значение в секундах.
- коли хочется, чтобы видео воспроизводилось до какого-то момента, то необходимо внести data-end=»60″. Вместо 60 написать своё значение в секундах.
- резиновый, растягивается на всю ширину, поэтому не нужно рассчитывать размеры отдельно для каждой области.
- если больше интересно вертикальное размещение изображений, то стиль может быть таким:
#video12 < position: relative; padding-bottom: 75%; >#video12 iframe < position: absolute; width: calc(100% — 120px); height: calc(100% — 120px*3/4); >#video12 div < position: absolute; top: 0; right: 0; width: 110px; height: 100%; padding: 5px; overflow-y: auto; >#video12 img < width: calc(100% — (5px + 1px)*2); padding: 5px; border: 1px solid #555; border-radius: 5px; opacity: .7; >#video12 img:hover < opacity: 1; cursor: pointer; >#video12 img:focus
Несколько видео с текстом «серия 1»
Внешний вид самый простецкий, его нужно изменить согласно дизайну сайта.
серия 1 серия 2 серия 3
#video12 < position: relative; padding-bottom: 75%; >#video12 iframe < position: absolute; width: calc(100% — 5em); height: 100%; >#video12 div < position: absolute; top: 0; right: 0; width: 5em; height: 100%; overflow-y: auto; >#video12 span < display: block; text-align: center; >#video12 span:hover < color: #ff3200; cursor: pointer; >#video12 span:focus серия 1 серия 2 серия 3 var IMG = document.querySelectorAll(‘#video12 span’), IFRAME = document.querySelector(‘#video12 iframe’); for (var i = 0; i < IMG.length; i++) < IMG[i].onclick = function() < IFRAME.src = ‘http://www.youtube.com/embed/’ + this.dataset.video + ‘?rel=0 if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([sS]*)/g, ‘$1 if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([sS]*)/g, ‘$1 this.style.backgroundColor=’rgba(0,0,0,.2)’; >>
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/m24IuebMXPorel=0
function cargarVideo(id) var o = document.getElementById( ‘reproductorYT’ );
if( o )
>
(/script> Mikhail Спасибо, видео я установил, но оно нехорошо сливается с фоном, нельзя ли как нибудь рамочку приладить? NMitra Если путём скрипта описанного выше, то:
#reproductorYT -moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 5px;
border: 1px solid #555;
>
Если посредством IFRAME из YouTube, то окружите его div, например,
.youtubetext-align: center;
padding: 1px;
border: 1px solid #555;
>
Или любой другой на ваше усмотрение. сергей http://www.oneshotinc.ru/video.php
не работает переключение видео, в чем может быть причина? NMitra Вместо
и без строки Спасибо за урок. А нельзя ли в Вашей конструкции сделать так, чтобы при выборе видео, страница возвращалась бы к плейеру. Например, при большом списке роликов посетителю приходиться отматывать страницу до начала, чтобы просмотреть выбранный ролик.
Спасибо. NMitra Думаю так:
Анонимный Здорово! Большое спасибо. А давайте ещё поусовершенствуем. Как сделать так, чтобы ролик прокручивался с определенного момента и до определенного момента?
Спасибо. NMitra По моему, это уже решается на стороне YouTube. Анонимный У-у-у-у-у-у-у! Жалко. Анонимный Думаю так:
(a href=»javascript:cargarVideo(‘ID_N’);» onClick=»scrollTo(0,0); return false;»>———————————————————————
Здравствуйте, Наташа.
Проблемка, к плейеру то «отматывает», а вот выбранный ролик не загружается. NMitra Вот это работает
Анонимный Умничка! Спасибо. Анонимный Здравствуйте, Наташа.
Извените, что пишу не по теме, но уже весь инет перерыл и не нашел ничего подходящего. Подскажите возможность, как позиционировать новое окно заданных размеров (например форму регистрации) на странице в 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,
Чтобы прописать стиль один раз В стилях вместо #video12 применить .video12
Тогда следующий блок будет var IMG = document.querySelectorAll(‘[id^=»video1″] span’);
for (var i = 0; i < IMG.length; i++) IMG[i].onclick = function() var IFRAME = this.parentNode.previousElementSibling;
IFRAME.src = ‘http://www.youtube.com/embed/’ + this.dataset.video + ‘?rel=0
if(this.dataset.end) IFRAME.src = IFRAME.src.replace(/([sS]*)/g, ‘$1
if(this.dataset.start) IFRAME.src = IFRAME.src.replace(/([sS]*)/g, ‘$1
this.style.backgroundColor=’rgba(0,0,0,.2)’;
>
>
NMitra Здравствуйте, Анонимный №2
См. последний пример, только вместо «серия 1» пишите код своей картинки Женя Добрый день, подскажите пожалуйста как сделать так: есть ссылка простая (больше ничего не видно — iframe или div — display:none;)
при нажатии на ссылку — появлялся бы блок с видео и автоматом начинал проигрываться.
получается только спрятать бок и проявить его по нажатию. но проблема в том, что он когда «none» все равно начинает проигрываться сам, хоть его и не видно. а если убрать autoplay то приходится после появления блока дополнительно тыкать на play (((
спасибо NMitra Добрый день,
вариант 1 http://shpargalkablog.ru/2011/02/modalnoe-okno-css.html (см. для YouTube)
вариант 2 http://shpargalkablog.ru/2014/01/pause-youtube.html Анонимный а как скачать ролик себе на комп ьютер ? подскажи
NMitra Попробуйте http://ru.savefrom.net Анонимный Здраствуйте. Не подскажете почему при смене картинок ролика с 1.jpg на любое другое (например 2.jpg) видео не загружается? NMitra Здравствуйте, изменить эту строку
var idIMG = this.src.replace(/http. img.youtube.com.vi.([sS]*?).1.jpg/g, ‘$1’); Анонимный Но если у меня несколько видео и в каждом я хочу указать разную картинку. В одном первую в другом вторую. Как указать ето в переменной? NMitra Передавать id не через URL картинки, а через data-video=»» как это сделано в примере с текстом ниже. И там и там скрипт один.
Анонимный Огромное спасибо! Анонимный Доброго времени суток у меня такой вопрос как можно сделать ротатор своих видео с ютуба (своего канала )на свой сайт что бы при каждой загрузке (перезагрузке)одной и той же страницы в одном и том же месте показывалось ДРУГОЕ видео ? NMitra Здравствуйте,
можно рандомом добавлять из списка выбранных вами видео
var image=new Array(12);
image[0]=»xFa2_PVMeDQ»;
image[1]=»hSrOpTYKNMw»;
image[2]=»WFhzzJjRncI»;
image[3]=»JMJXvsCLu6s»;
var alea=Math.round(Math.random()*3);
document.write(‘‘);
Наверняка есть более расширенный вариант, но нужно читать документацию. Можно ведь поиск по своему каналу сделать http://shpargalkablog.ru/2011/08/poisk-youtubecom.html Unknown Спасибо, черт возьми :))).
Кстати, сложно ли реализовать скрипт для просмотра фоток с видео, то есть при нажатии на миниатюру что бы показывалась фотка ? NMitra Что-нибудь типа этого?
http://shpargalkablog.ru/2014/02/gallery.html
http://shpargalkablog.ru/2013/01/gallery-foto.html Антон Благов Неееет, я запилил форму на сайт, которая позволяет выбирать видео, а можно ли переделать js так, что бы в iframe вставлялось и видео и простые фотки ? Антон Благов То есть в одной строке видео из ютуба и фото из сайта Антон Благов http://joombra.ru/details.php — вот ссылка на сайт, если нужно будет глянуть. Антон Благов Я пытался поправить js, но так и не добился чтоб в iframe вставлялись и изображения и видео с youtube по клику Антон Благов Единственный способ, который я придумал — это передавать на 2 наложеных друг на друга обертки ютубаи фота display:block и none, то есть при нажатии на маленькое окошко с фото, скрывать фрейм видео и наоборот, но это такой кастыль. NMitra Я всё равно не понимаю что нужно сделать: через iframe картинки тоже можно показывать (с высотой и длинной только нужно определиться):
И зачем накладывать на iframe картинку: если человек щелкнул по миниатюре, то он планирует посмотреть следующее видео, а не картинку к нему. Скорость загрузки не станет выше, если ему сначала предлагать картинку на последующие видео. Только при загрузке всей страницы это важно. Антон Благов Смотрите, есть iframe, в который мы подпихиваем видео, которые выбираются в миниатюре, так вот, я хотел сделать так, что бы в миниатюрах были и фото и видео, то есть если мы кликаем по миниатюре Youtube — открывается видео, если мы кликаем по миниатюре с фоткой из сайта, то просто открывается фотка. NMitra А теперь понятно 🙂 Разбейте (отделите) классами картинки от видео, например, так (по середине картинка): http://jsfiddle.net/NMitra/60wv1czn/ Антон Благов Разбил, сделал, вставил картинку со своего сайта, в итоге в iframe появилось вот что
http://joombra.ru/img/trouble.PNG Антон Благов Можно ли через js, если класс — img, не слать в iframe ссылку на youtube ? Антон Благов Допилил, если кому будет нужно — просто вставляете IFRAME.style.backgroundImage = ‘url(‘ + idIMG + ‘)’; предпоследней строчкой и в img с классом img можно пихать свои изображения. Антон Благов IFRAME.style.backgroundImage = ‘url(‘ + idIMG + ‘)’; вместо IFRAME.style.backgroundImage = ‘url(//img.youtube.com/vi/’ + idIMG + ‘/0.jpg)’; NMitra Всё верно Антон Благов Огромное спасибо . Борис Добрый день! У меня такая проблема — очень понравился модуль с множественным видео в горизонтальном расположении,но никак не могу настроить его так, чтобы изображение было 60% по высоте и ширине и при этом располагалось по центру и отступ от маленьких превью не был огромен. попробовал сам и ничего не вышло. на бутсрапе битрикса он вообще при изменениях не хочет адаптироваться. уезжает куда -то. Сможете помочь? NMitra Здравствуйте,
#video12 position: relative;
margin-bottom: 110px;
padding-bottom: 60%; /* высота */
>
#video12 iframe position: absolute;
width: 60%;/* ширина */
height: 100%;
left: 20%;/* по центу */
> Unknown на это
var IMG = document.querySelectorAll(‘#video12 span’),
IFRAME = document.querySelector(‘#video12 iframe’);
ругаются старые движки, например при интеграции ссылок на страницу с этим отображение в софт
Фиксится так:
1 подключением JQuery
2 var IMG = $(‘#video12 img’),
IFRAME =$(‘#myvframe’);
3 IFRAME.attr(‘src’, ‘//www.youtube.com/embed/’ + idIMG + ‘?rel=0
NMitra Скоро не будут, у меня таких посетителей менее 1% 🙂 Анонимный Как на странице реализовать вывод нескольких видео с разделами (каждый с вертикальным меню)? Используя два скрипта, изображения меню перового раздела выводятся во втором скрипте. NMitra Нужно использовать не ID, а CLASS.
На следующей недели перепишу статью, чтоб было проще, без скрипта, только на HTML. akula-z Насколько я понимаю, этот скрипт подходит только для добавляения видео с Ютую? То есть, добавить другой фрейм с видео (с иного источника), я не смогу? NMitra Следующей статьёй планирую дать код, который можно применить к любому IFRAME akula-z Ох,поскорей бы эта статья вышла.
Денис Шадрин А как можно сделать автозапуск ютуб видео без звука? Также интересует как растянуть ютуб видео на всю ширину сайта? Как фоном сделать я знаю, интересно именно растянуть по ширине, но не по высоте. NMitra При помощь API https://developers.google.com/youtube/js_api_reference#Playback_controls
На всю ширину сайта:
width: 100%;
#Youtube width: 100%;
height: 20em;
>
var player;
function onYouTubePlayerAPIReady() player = new YT.Player(‘Youtube’, events:
>);
>
function onPlayerReady(event) player.mute();
>
https://jsfiddle.net/NMitra/u7g252yx/1/ Артур Солодухин Доброго времени суток! А можно как то переделать скрипт,чтобы видеоролик показывался вместо кнопки по которой кликнули,а до клика его не было бы видно.И чтобы размер видео адаптировался к любым разрешениям экрана. NMitra Доброго времени суток. Не поняла, большое видео тогда не нужно? Вместо скрипта я советую HTML http://shpargalkablog.ru/2016/05/gallery-videos.html#videoslider-right-img А примеры все адаптируются, без фиксированного размера.
Источник: shpargalkablog.ru