Как встроить видео с Youtube на сайт без лишних элементов

Это возможно, но не надежно — stackoverflow.com/questions/5157377/… . Вот страница документа (не перечислен предыдущий метод): developers.google.com/youtube/player_parameters . Просто ради интереса, почему бы вам не использовать встроенный код youtube?

Joe 10 сен. 2013, в 18:44
andrewb 23 сен. 2015, в 02:38

В документации YouTube (на данный момент) указано, что для встраивания рекомендуется использовать iframes: developers.google.com/youtube/… . Они также устарели альтернативные опции, например, опция . Поэтому может быть лучше придерживаться .

andrewb 23 сен. 2015, в 02:39
Nikola Lukic 05 июнь 2017, в 11:39
Показать ещё 2 комментария
Поделиться:

4 ответа

Вот пример внедрения без iFrame:

сравните с обычным кодом iframe «embed» с YouTube:

и что касается HTML5, используйте тег , например, (исправленный):

anapsix 07 авг. 2014, в 19:33
Поделиться
для встраивания без Adobe Flash, используйте
anapsix 11 сен. 2014, в 18:49
похоже, это не работает для iOS . оно вообще не хочет отображать видео. IOS не поддерживает ?
Charles John Thompson III 07 янв.

Как вставить двадцать видео с Ютуба и не скачать слона

2015, в 02:19
andrewb 23 сен. 2015, в 02:35
andrewb 23 сен. 2015, в 02:37
anapsix 05 окт. 2015, в 20:11
Visruth 25 дек.

2018, в 04:50
Показать ещё 4 комментария

Есть 3 способа встраивания видео:

• IFrame внедряет теги
• IFrame встраивается с использованием API-интерфейса IFrame Player
• Объект AS3 (и AS2 *) содержит DEPRECATED

Я думаю, что вы ищете вторую из них:

IFrame внедряется с использованием API-интерфейса IFrame

В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением ytplayer. Указанная здесь функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

// Load the IFrame Player API code asynchronously. var tag = document.createElement(‘script’); tag.src = «https://www.youtube.com/player_api»; var firstScriptTag = document.getElementsByTagName(‘script’)[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Replace the ‘ytplayer’ element with an and // YouTube player after the API code downloads. var player; function onYouTubePlayerAPIReady() < player = new YT.Player(‘ytplayer’, < height: ‘390’, width: ‘640’, videoId: ‘M7lc1UVf-VE’ >); >

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

Пример внедрения без использования iframe заключается в использовании тега :

(замените yt-video-id на ваш идентификатор видео)

Ionică Bizău 10 сен. 2013, в 20:46
Поделиться
Это по-прежнему использует iframes для встраивания видео
user2217162 10 сен. 2013, в 18:58
Ionică Bizău 11 сен.

2013, в 04:33
вопрос о встраивании видео html5 youtube «без iframe».
taseenb 03 март 2014, в 11:21
Смотрите мой ответ для вариантов без iframe
markthethomas 08 июль 2014, в 17:13

Ну, я добавил пример встраивания без использования iframe. Если HTML5 включен, он будет использоваться. Если нет, то, вероятно, откат в режиме вспышки. Не уверен, что этого хочет OP.

Ionică Bizău 18 авг. 2014, в 05:02
Показать ещё 3 комментария

Да, но это зависит от того, что вы подразумеваете под «embed»; насколько я могу судить, прочитав документы, кажется, что у вас есть несколько вариантов, если вы хотите обойтись с использованием iframe API. Вы можете использовать javascript и flash API (https://developers.google.com/youtube/player_parameters) для встраивания проигрывателя, но это связано с созданием объектов Flash в вашем коде (что-то я лично избегайте, но не обязательно того, что вам нужно). Ниже приведены некоторые полезные разделы из dev docs для Youtube API.

Если вы действительно хотите обойти все эти методы и включить видео без какого-либо iframe, то лучшим выбором может быть создание видеопроигрывателя/приложения HTML5, которое может подключаться к API данных Youtube (https://developers.google.com/youtube/v3/). Я не уверен, в какой мере ваши потребности, но это будет путь, если вы действительно хотите обойтись с помощью любых фреймов или флеш-объектов.

Надеюсь, это поможет!

Полезное:

IFrame внедряется с использованием API-интерфейса IFrame Player

Следуйте инструкциям API IFrame Player, чтобы вставить видеопроигрыватель на свою веб-страницу или приложение после загрузки JavaScript-кода Player API. Второй параметр в конструкторе для видеоплеера — это объект, который указывает параметры игрока. Внутри этого объекта свойство playerVars идентифицирует параметры игрока.

В приведенном ниже коде HTML и JavaScript показан простой пример, который вставляет игрока YouTube в элемент страницы с идентификационным значением ytplayer. Указанная здесь функция onYouTubePlayerAPIReady() вызывается автоматически при загрузке кода API IFrame Player. Этот код не определяет параметры игрока, а также не определяет другие обработчики событий.

IFrame внедряет теги

Определите тег в своем приложении, в котором URL-адрес src указывает содержимое, которое будет загружено игроком, а также любые другие параметры игрока, которые вы хотите установить. Параметры высоты и ширины метки определяют размеры проигрывателя.

Если вы создаете элемент самостоятельно (вместо использования API-интерфейса IFrame Player для его создания), вы можете добавлять параметры игрока непосредственно в конец URL-адреса. URL-адрес имеет следующий формат:

Объект AS3 внедряется

Объект включает тэг, чтобы указать размеры и параметры проигрывателя. Пример кода ниже демонстрирует, как использовать объект embed для загрузки AS3-плеера, который автоматически воспроизводит то же видео, что и предыдущие два примера.

Источник: overcoder.net

YouTube виджет каналов и видео для сайта

Видео с YouTube помогут вам завладеть вниманием своих пользователей и оставить их на сайте как можно дольше.

Больше лидов

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

Новые подписчики на YouTube

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

вебсайтов поддерживается
часов вложено в разработку
чтобы начать использование
счастливых клиентов

Станьте одним из 2,078,753 клиентов Elfsight Apps

Создайте свой первый виджет Elfsight YouTube Виджет бесплатно.

В чем уникальность Elfsight YouTube Виджет?

Весь YouTube контент в вашем распоряжении

Галерея ютуб от Elfsight предоставляет максимум возможностей в интеграции видео с Ютуба на сайт. Вы можете задать любой источник: каналы, плейлисты, отдельные ролики — и создать свою уникальную коллекцию. Чтобы структурировать и разнообразить собранный контент, создавайте собственные группы и добавляйте в них любые видео.

Превратите просмотр в яркие впечатления

Собрали отличный видеоконтент для своего сайта? Преподнесите его красиво! Наша видео галерея предлагает три варианта расположения контента, а также выбор режима воспроизведения: полноэкранный режим Popup, проигрывание из списка или переход на YouTube. Popup покажет не только видео, но и всю дополнительную информацию: логотип, счетчики реакций, комментарии и кнопки. Не забудьте про шапку виджета: можно скрыть каждый из восьми элементов и задать название и описание галереи.

Создайте продуманную видео галерею

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

Цветовые решения на любой случай

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

MONETIZING
С AdSense монетизацией зарабатывайте на просмотрах

Наш плагин YouTube для каналов позволяет не только разнообразить контент сайта, но и заработать на нем. Привяжите свой аккаунт AdSense к виджету, показывайте промо видео на актуальные темы и получайте доход. Чем больше трафика на сайте, тем выше прибыль.

Источник: elfsight.com

Как добавить видео или список воспроизведения с YouTube на свой сайт

Вы можете разместить видео или плейлист с YouTube на своем сайте или блоге.

Размещение фильма с YouTube

1. В YouTube на компьютере, перейдите к странице видео, которое вы хотите разместить на своем сайте.
2. Под видео нажмите Поделиться .
3. Затем нажмите Встроить .
4. Скопируйте HTML код из окна, которое появляется.
5. Вставьте его на своём блоге или сайте.

Размещение плейлиста

1. Войдите в свою учетную запись YouTube на вашем компьютере.
2. Из списков, расположенных слева, выберите тот, который хотите вставить.
3. Скопируйте идентификатор плейлиста из адреса URL.
4. Получите код для вставки отдельного фильма, выполните следующие действия:
5. В место id видео (после embed/ ) вставьте videoseries?list= .
6. Вставьте идентификатор плейлиста после = .
7. Вставьте код на свой блог или сайт.

Управление вариантами размещения видео

Включение расширенного режима конфиденциальности

Благодаря режиму конфиденциальности вы можете размещать видео с YouTube без использования файлов cookie, которые отслеживают данные о поведении зрителей. Это означает, что информация об активности зрителей не собирается, чтобы персонализировать просмотр. Содержания, которое будет отображаться в плеере с включенным расширенным режимом конфиденциальности, не будет влиять на просмотр контента на YouTube.

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

Для использования расширенного режима конфиденциальности, измените URL домена, расположенный в HTML-коде с https://www.youtube.com на https://www.youtube-nocookie.com, как показано в следующем примере:

Поскольку youtube-nocookie.com это другой домен, администраторы сети должны добавить его в белый список.

Включение автозапуска размещенного фильма

Чтобы включить функцию автозапуска для размещенного на сайте фильма, добавьте cc_load_policy=1 в код, используемый для размещения видео.

Вы можете также выбрать, на каком языке будут эти надписи. Чтобы это определить, просто добавьте строку cc_load_policy=1 в код фильма.

• Элемент cc_lang_pref определяет язык субтитров, отображаемых в фильме.
• Элемент cc_load_policy=1 вызывает включение субтитров по умолчанию.
• Строка fr обозначает код языка, в данном случае французского. Список кодов языков см. в стандарте ISO 639-1.

Запрет на размещения ваших видео

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

1. Откройте Менеджер видео.
2. Откройте фильм, для которого вы хотите отключить функцию размещения, и нажмите Изменить.
3. Смените режим встраивания на Отключено.
4. Сохранить изменения.

Источник: webznam.ru