Вставка видео с ютуба на сайт html: Как добавить видео YouTube на сайт

Содержание

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

От автора: я работал над простым статичным веб-сайтом, на котором видео YouTube должно отображаться прямо на целевой странице.

Итак, я пошел простым путем, перешел на YouTube, захватил код для вставки, вставил его в редактор.

Штука в том, что задача была обеспечить высокую производительность, доступность и современные методы, поэтому вы можете себе представить мое раздражение, когда я заметил, что только на этом iframe я получил это:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

Это более 500 КБ, которые мои пользователи должны будут загрузить поверх веб-сайта, независимо от того, будут ли они смотреть видео. Есть ли у вас какие-либо идеи относительно того, как сильно это может поразить ваших пользователей, особенно тех, у кого медленное соединение или низкая производительность компьютеров? В довершение всего, их также будут отслеживать — Привет, Гугл — просто за загрузку видео, о котором они даже не подозревали.

Это был простой статичный веб-сайт, и я хотел свести к минимуму свое решение, так что вот что я придумал. Код для встраивания видео на YouTube по состоянию на август 2019 года выглядит следующим образом:

<iframe

width=»560″

height=»315″

src=»//www.youtube.com/embed/Y8Wp3dafaMQ»

frameborder=»0″

allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture»

allowfullscreen>

</iframe>

Так что я подумал, что если вместо реального видео я покажу только обложку, связанную с видео? Это все равно будет выглядеть как встроенное видео, но для этого потребуется только одно изображение. К счастью, у YouTube есть схема URL для миниатюр видео.

</a>

Круто, но я не хочу создавать новую страницу только для этого крошечного фрагмента кода. Что ж, нам повезло, потому что iframe имеет просто идеальную вещь — атрибут srcdoc. С его помощью вы можете получить источник iframe прямо на странице. Просто учтите, что это не сработает в Edge или IE, и что мы не можем использовать двойные кавычки.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<iframe

…

srcdoc=»<a href=//www.youtube.com/embed/Y8Wp3dafaMQ><img src=//i3.ytimg.com/vi/Y8Wp3dafaMQ/hqdefault.jpg></a>»>

</iframe>

Наконец, вы заметите, что если мы нажмем на изображение, оно загрузит видео, но в состоянии паузы, и нам нужно будет кликнуть его еще раз, чтобы начать просмотр. Не беспокойтесь, потому что URL для вставки видео поддерживает параметры проигрывателя, и среди них есть переменная autoplay, которая делает именно то, что вы ожидаете. Кроме того, из-за стиля браузера по умолчанию пользователи в системах с полосой прокрутки, а не на macOS, увидят ненужную полосу прокрутки, но ничего такого, что нельзя решить небольшим сбросом CSS.

Реми Шарп отметил, что мы должны оставить за собой запасной вариант src для браузеров, которые не поддерживают srcdoc.

Адриан Розелли предложил несколько настроек для улучшения доступности. Также, применяя эти предложения, я зафиксировал положение изображения, чтобы оно оставалось по центру как по горизонтали, так и по вертикали, не прибегая к background-size: cover. Спасибо, ребята, за ваш отзыв!

Вот окончательный результат:

Отдельно iframe:

<iframe

width=»560″

height=»315″

src=»//www.

youtube.com/embed/Y8Wp3dafaMQ»

srcdoc=»<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=//www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=//img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt=’Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition’><span>▶</span></a>»

frameborder=»0″

allow=»accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture»

allowfullscreen

title=»The Dark Knight Rises: What Went Wrong? – Wisecrack Edition»

></iframe>

Таким образом, все пользователи должны будут загрузить предварительную версию — это изображение обложки, что мне кажется довольно разумным. Вы можете настроить это еще, например, использовать разные размеры миниатюр для разных устройств, и если вам нужен больший контроль над тем, что пользователь будет загружать и какие функции включать, вы всегда можете изучить YouTube Player API.

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

Автор: Arthur Corenzan

Источник: //dev.to

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Как получить HTML-код для вставки на сайт видео с YouTube

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

www.YouTube.com. Наверняка приходилось встречать ролики, расположенные на видео-хостинге YouTube, которые вставлены в посты в социальных сетях или на чьи-нибудь сайтах. В этой статье подробно рассмотрим, где и как взять HTML-код для того, чтобы вставить себе на сайт своё (или понравившееся) видео с YouTube.

Как узнать адрес YouTube видео, расположенного на сайте

Посмотрим на примере обычного видео, расположенного на сайте, как узнать его HTML-код для вставки на свой сайт. Для этого внимательно приглядимся к всплывающей информации на видео при наведении мышки. В правом верхнем углу видео находится хитровывернутая стрелка. Она то нам и нужна! Кликаем по ней!

Ссылки «Поделиться» ролика с YouTube

Клик по хитровывернутой стрелки приведёт к тому, что в окне видео-плеера YouTube поверх самого видео появится слой «Поделиться» с прямой ссылкой на видео. Но нам нужна не ссылка на видео, нам нужен HTML-код для вставки этого видео на сайт. Поэтому двигаемся дальше и кликаем по кнопке ...:

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

Ура-ура! В новой вкладке откроется собственно страница с видео на сайте YouTube. А это нам и нужно. Смотрим на то, что расположено ниже видео и делаем следующее:

Находим ссылку «Поделиться» (уже со знакомой нам хитровывернутой стрелкой), кликаем по ней!
В выпавшем меню, находим ссылку «HTML-код».

В общем-то всё!

Во вкладке «HTML-код», найденной выше будет то, что мы искали:

<iframe src="https://www. youtube.com/embed/CZKXWQ02e-4" frameborder="0" allowfullscreen></iframe>

Этот код можно скопировать и попытаться вставить к себе на сайт. С этим могут быть проблемы, так как тег <iframe> может быть запрещён, но это тема для другой статьи.

Также есть расширенные настройки во вкладке YouTube «HTML-код», но это тоже отдельная тема.

P.S. обновлённая статья «Ссылка на видео и HTML-код для вставки видео на сайт c YouTube»

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Скрытые возможности встраивания видео из Youtube | Академия Лидогенерации | Официальный сайт

При создании сайтов частенько возникает необходимость вставить какой-то видео-ролик из YouTube. Это может быть продающее видео, какая-то инструкция, видео-комментарий.

В этой статье я покажу вам, как это сделать. А также поделюсь некоторыми дополнительными полезностями для вставки этих видео:) Поехали!

Чтобы вставить видео на сайт, необходимо сначала скопировать его код. Код видео берем с сайта YouTube, открыв страницу с нужным видео. На примере видео Академии Лидогенерации:

Комментарии:

Видео на сайте будет в формате iframe — это значит, что на вашем сайте будет врезано встроенное окошко (фрейм), в котором будет воспроизводиться видео напрямую с YouTube (типа окно трансляции такое). Если ваш сайт не поддерживает iframe, то видео не воспроизведется (в этом случае необходимо будет вставлять видео не кодом с YouTube, а используя функции плеера вашего сайта, если они есть)).
Если видео не ваше, то пункта “HTML-код” может и не быть, если владелец видео запретил встраивание этого видео:

Дополнительные настройки встраивания.

Кликните ЕЩЕ под HTML-кодом видео и вы их увидите:

Как они работают:

“Размер видео” — тут понятно. Насколько большое окно с видео будет у вас на сайте (можно выбрать или произвольного размера).
“Показывать похожие видео …” — если вы не пиарите свой YouTube канал, рекомендую убирать эту галку, чтобы по окончанию видео заботливый YouTube не предлагал посетителю вашего лендинга посмотреть похожие видосы на тему.
“Показать панель управления” — отображает нижнюю панель управления видео. Не стоит ее отключать. Не знаю, как вас, а лично меня бесит, когда я не могу убавить звук видео или перемотать его:) оставьте людям возможность рулить процессом.
“Показать название видео и…” — убирайте галку, если не хотите, чтобы посетитель лендинга видел сверху видео панельку с названием видео и кнопками лайков. Лично я бы убрал как лишнюю отвлекашку: клик на название открывает новое окно с YouTube (и человек уходит с лендинга), а лайки… да кому они нужны?)))
С режимом повышенной конфиденциальности я лично не разбирался. Справка YouTube говорит, что Если включить этот режим, YouTube будет сохранять информацию о посетителях вашей веб-страницы, только если они посмотрят ролик.

Если тыкать эти галки, вы увидите изменения в коде для вставки. Пример:

Хозяйке на заметку: синим выделен идентификатор видео, указывающее YouTube какое именно видео воспроизводить в фрейме. Хотите поменять видео без изменения настроек отображения на сайте — просто поменяйте эту часть кода.

Как вставляются доп. коды

Как видите, доп.коды вставляются через знак ? после идентификатора видео. Знак ? ставится только перед первым доп.кодом, остальные вставляются через знак &. Например:

Другие коды, которые могут быть полезны:

autoplay=1 — автоматически стартует видео сразу после загрузки страницы.
&loop=1 – зацикливает воспроизведение видео ролика на вашей странице.
fs=0 — запрещает разворачивать видео на весь экран (убирает соответствующую кнопочку в правом нижнем углу видео).
start=20 — запустит ролик с 20-й секунды видео. Полезно, если нужно воспроизвести видео с какого-то конкретного момента.
fmt=6 — задает качество видео. fmt=18 делает качество еще лучше, а fmt=22 делает наилучшим. Используется также параметр hd=1 для высокого качества по умолчанию.
iv_load_policy=3 — отключает любые комментарии автора видео:) такие как Аннотации, Подсказки и появляющийся в начале видео аватар канала автора. Может быть полезно, если вставляете чужое видео (атата вам) и не хотите уходов на канал автора видео. Этот код НЕ отключает рекламу Google, которая может всплывать на вашем видео (как вы понимаете, такого кода вообще в природе не существует))).

Удачных вам экспериментов и CTR до неба!

Ваш Олег Рассказов.

Статья подготовлена при поддержке и соавторстве знакомого специалиста по YouTube Юрия Бледных в рамках конкурса «Контента много не бывает».

Если статья Вам понравилась, ставьте лайки, пишите комментарии.

Как вставить видео с Youtube на сайт пошагово

У многих людей до сих пор возникает один и тот же вопрос: — Как вставить видео с Yuotube на сайт. Этот вопрос по логике не должен был бы возникать, но раз он есть, то я решил ответить на него на собственном примере по шагам.

Итак, вам понравилось какое-то видео на видеохостинге Youtube и вы решили поделиться ими со своими посетителями или друзьями, но не знаете, как вставить это видео с youtube.

Как вставить видео с YouTube на блог — видеоурок инструкция

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

В видео я покажу вам то, пошаговую инструкцию как вставить видео с YouTube на блог на CMS WordPress, Livejornal, Liveinternet, Blogger.

Плагин называется Smart YouTube PRO. Ссылка на скачивание — http://wordpress.org/extend/plugins/smart-youtube/

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

Присылайте свои вопросы мне, за них вы получите подарок, а я тему для видео или статьи. Мне важны ваши вопросы! Слать вопросы сюда — https://zarabotokwmz.ru/zadaj-vopros-poluchi-podarok

Дальше читайте почти то же самое в виде статьи.

Сразу под окном с видеороликом есть небольшой ряд кнопок. Вам нужно нажать на кнопку “Отправить”.

Шаг 1, нажимаем на отправить

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

Шаг 2, нажимаем на встроить

Если вы знаете, какого разрешения вам нужно видео, то выбирайте стандартное или даже персонализированное. Здесь же вы можете поставить галочку напротив “Использовать старый код встраивания”. Если его не ставить, то код, который вам даст сервис, будет иметь вставку во фрейме, а это не всегда работает, но вы можете вставить и его, попробовав тем самым на сайте. Но, часто такой код не работает.

Шаг 3, выбираем размер и копируем код

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

По просьбе моих любимых посетителей обновил картинку с параметрами вставки

Шаг четвёртый.

Вот и сама вставка кода. А раз это код, то и вставлять его нужно в код.

Как вставить видео с Youtube на блог работающий на WordPress

Вам нужно нажать на кнопку “HTML” сразу под полем, куда вносится заголовок. А в основное поле уже вставляете полученный на youtube.com код с видео. Посмотреть, что у вас получилось можно после того, как нажмёте на кнопку “Визуально”.

Вставляем видео с youtube на блог работающий на wordpress

Как вставить видео с Youtube на блог на сервисе LiveJournal. com

Здесь тоже самое, что и на обычном самостоятельном блоге. Выбирать нужно тоже кнопку “HTML” рядом с полем ввода заголовка. Вставили и тут же можно посмотреть результат после нажатия на кнопку рядом “Визуальный редактор”.

Вставляем видео с youtube на блог на сервисе LiveJournal.com

Как вставить видео с Youtube на блог на сервисе Blogger.com

Опять тоже самое. Вам нужно найти поле, в которое можно вставлять html код видеоролика. Тут кнопки расположены наоборот, в отличие от двух предыдущих. Вам нужно нажать на кнопку “Изменить код”, а посмотреть результат можно нажав на кнопку “Создать”.

Вставляем видео с youtube на блог на сервисе Blogger.com

Вот что у вас должно получиться:

Вот такие простые шаги требуется совершить для того, чтобы вставить видео с youtube на блог на любом сервисе.

Как вставить только часть (кусок) видео с YouTube на сайт?

– Автор: Игорь (Администратор)

Вставка части видео с YouTube на сайт

YouTube это достаточно полезный инструмент. Он экономит место на диске и не нагружает ваш сервер. И при этом позволяет просматривать видео с вашего сайта с высокой скоростью.

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

Первый, это ручное изменение html-кода для вставки. К сожалению, в данном случае вы лишь можете задать время начала и окончания видео, при этом видео полностью останется доступным для просмотра.

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

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

Ручное изменение html-кода для вставки части видео с YouTube на сайт

Не смотря на то, что существует два варианта вставки: с использованием iframe и с использованием тега object. Необходимо изменять одни и те же параметры «start» и «end». Так, что не удивляйтесь, что действия очень похожи.

Параметр «start» задает время начало видео в секундах. Параметр «end» задает время остановки видео.

Вставка с использованием iframe

Откройте любой редактор html или редактор исходного кода. Рассчитайте в секундах время начала и время окончания видео, и добавьте параметры «start» и «end» так, как показано на рисунке:

Обратите внимание, что перед параметрами необходимо поставить символ «?», иначе видео не будет загружаться.

Примечание: Символ «?» нужен для корректного составления Url.

Вставка с использованием тега object

Действия очень похожи на вставку в iframe, за исключением того, что параметры необходимо вставить в два места. В одну из секций «param» и в секцию «embed», как показано на рисунке:

В данном случае символ «?» не требуется, так как в ссылках уже есть параметры.

Используем сервис tubechop.com для вставки части видео с YouTube на сайт

Пользоваться этим сервисом очень легко. После того как сайт открылся, просто найдите нужное видео с YouTube. Введите в поле поиска либо нужные слова, либо конкретную ссылку на ролик с YouTube. Интерфейс в чем-то пытается повторить сам youtube, поэтому разобраться в нем будет легко.

Для открывшегося видео выберите нужный диапазон, как это показано ниже на рисунке, и нажмите кнопку «Chop it».

После того как страница перезагрузится, перед вами появится пример того, как видео будет отображаться для пользователей. Сам код для вставки будет находится в поле «Embed Code» (чуть правее от видео).

Как видите оба способа достаточно простые и потребуют от вас минимум времени.

☕ Хотите выразить благодарность автору? Поделитесь с друзьями!

Как извлечь аудио из видео быстро и без потери качества?
Как настроить прозрачность окон (границ) в Windows 7?

Добавить комментарий / отзыв

Как сделать видео на сайте адаптивным

Вы здесь: Главная — HTML — HTML 5 — Как сделать видео на сайте адаптивным

Независимо от того, вставляете ли вы на сайт видео html5 тегом video или встраиваете с ютуба через iframe, оно должно хорошо адаптироваться под различные устройства.

Вставить и адаптировать HTML5 видео

Для вставки видео на сайт, нужно в HTML разметке внутри блока обертки, прописать тег video, внутри которого через src подключить видео-ролик. Атрибут controls, дает возможность управлять видео. Атрибут poster указывает ссылку на превью-картинку к видео-ролику. Впрочем можно обойтись и без картинки, в таком случае, браузер покажет в плейере первый кадр видео.


<div>

    <video src="video/travaho.mp4" controls poster="video/travaho.jpg">

        Ваш браузер не поддерживает HTML5 видео.

    </video>

</div>

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

Зададим классу movie ширину 100%, а высоту пусть браузер вычислит автоматически. Ограничим ширину плеера до 500 пикселей.


.movie {

    width: 100%;

    height: auto;

    margin: 0 auto; // выравнивает по центру по вертикали

    display: block;

    max-width: 500px;

}

Теперь, благодаря нескольким строчкам CSS кода, видео стало адаптивным и пропорционально подстраивается под любую ширину экрана без горизонтальной полосы прокрутки.

Адаптивное видео с Ютуба

Все-таки на большинстве сайтах, мы видим встроенное видео с Ютуба. Как вы понимаете, в HTML коде для встраивания видео, фиксированные размеры. Значит, сделать его адаптивным – задача веб-мастера.


<iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Мы не можем напрямую повлиять на ширину iframe, как в первом случае. Зато можем создать блок-контейнер и задать ему CSS правила.


<div>сюда вставить код iframe</div>

Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим классу movie-container следующие свойства:


.movie-container {

     position: relative;

     padding-bottom: 56.25%;  // сохраняет пропорции

     height: 0;

     overflow: hidden;

     display: block;

}

Мы расположили iframe относительно контейнера и приняли меры предосторожности на случай переполнения контейнера.

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

Создадим ещё один блок-обертку, который ограничит размеры и отцентрирует видео.


.movie-fixed {

     max-width: 500px;

     margin: auto;

}

HTML разметка целиком.


<div>

    <div>

        <iframe src="https://www.youtube.com/embed/fn_JrXerhUg" frameborder="0" allow="accelerometer;
        <autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>

</div>

Адаптивное видео на Bootstrap

У Bootstrap уже есть готовые классы, чтобы видео было адаптивным. Один класс присваивается самому объекту:


<video>

<iframe>

<object>

<embed>

Два других класса – блоку-обертке.


<div>

    <iframe src="URL" allowfullscreen></iframe>

</div>

Создано 25.09.2019 10:28:07
Михаил Русаков

Предыдущая статья Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov. ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov. ru»]Как создать свой сайт[/URL]

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

Простые способы — как вставить видео Youtube на сайт.

Как вставить на сайт видео Youtube с помощью кода HTML (фрейма)

Использование кода фрейма для вставки ролика видео на сайт, наиболее распространённый и простой вариант.

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

В меню выберите пункт \Копировать HTML-код\ , левой кнопкой мыши скопируйте код.

Вставьте фрейм в html страницы сайта. Если необходимо, сразу отредактируйте параметры кода.

Измените ширину и высоту окна окна для вывода видео на сайте. На Youtube оно слишком большое (но это на ваше усмотрение). В приведённом коде ширина окна — width= “854”, высота — heigt=”480” .

Чтобы уменьшить — изменим на более приемлимый для сайта размер, сделаем: width= “540”, высота — heigt=”320”.

Вот так выглядит видео-ролик на сайте

Как ставить видео Youtube на сайт WordPress

В WordPress используется поддержка размещения видео с помощью шорткода.

Зайдите в админ панель сайта, далее \Все записи\ — \Добавить новую\.

Откройте \Текст\- редактирование html\ и вставьте такой код:

Ссылка видео YouTube

Далее откройте видео на Y, и скопируйте код URL ролика

Потом вставьте URL в код между тегами — и опубликуйте запись.

Для вставки видео на сайт в Wjrdpress также можно применять различные плагины, например: Video. js, JW Player и другие.

Как вставить Youtube видео на Joomla

В Joomla, для размещения видео на странице, лучше использовать специальные плагины, например: AllVideos.

Этот плагин просто установить, настроить и использовать для вставки любых видео-роликов на сайт.

Как вставить Youtube видео на страницу Joomla смотрите в материале — Работа с плагином Allvideos. Вставка кода видео на страницу.

***

Как увеличить трафик на сайт с помощью YouTube

Вставить баннер в joomla, плагин MultiAds

< Назад
Вперёд >

Как встроить видео с YouTube в HTML-страницу

Видео с YouTube на свой веб-сайт

YouTube будет размещать ваши видео, и вы можете легко встроить их на свой веб-сайт. В следующем HTML-коде показано, как встроить youtube

. видео на вашей веб-странице.

Как добавить видео YouTube на свой веб-сайт — шаги

Все, что вам нужно сделать, это скопировать и вставить URL-адрес видео с YouTube на свою HTML-страницу.

Как получить URL-адрес Youtube?

Используйте сайт YouTube, чтобы найти видео, которое вы хотите встроить.

Щелкните ссылку «Поделиться» под вашим видео на YouTube, чтобы открыть доступные параметры обмена.

Когда вы нажимаете «Поделиться», появляется еще одна кнопка «Вставить», которая находится под кнопкой «Поделиться»

Нажмите кнопку «Вставить», и вы увидите поле чуть ниже, заполненное кодом.

Если щелкнуть мышью в текстовом поле, заполненном кодом, весь текст в этом поле будет выделен. Щелкните правой кнопкой мыши текстовый файл и скопируйте код.

Следующим шагом будет вставка кода на вашу HTML-страницу.Полный исходный код выглядит следующим образом:

Тег объекта HTML

Вы можете встроить видео с YouTube в HTML без тега iframe. Вы можете использовать тег объекта HTML для встраивания мультимедиа (например, аудио, видео, Java-апплетов, ActiveX, PDF и Flash) на свои веб-страницы.