Top.Mail.Ru

Вставить видео с ютуб на сайт

Сегодня я покажу два способа, как разместить видео с ютуба на своем сайте.

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

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

Кстати, если вы хотите, чтобы видео сразу начинало воспроизведение, то нужно немного изменить iframe. Первым делом, нужно в конец ссылки добавить ?autoplay=1, т.е. теперь ссылка в iframe должна быть – src=”https://www.youtube.com/embed/Np_AsNAWVFQ?autoplay=1″.

Это мы рассмотрели вариант, если у нас простая html или php страница, мы ее сами пишем с нуля. Все же современные системы управления контентом, такие, к примеру, как WordPress, имеют свои встроенные html редакторы с функциями вставки аудио или видео.
И если вы просто вставим ссылку (https://www.youtube.com/watch?v=Np_AsNAWVFQ) с ютуб в этот редактор, то эта ссылка будет распознана, и при выводе поста, будет сразу отображаться стандартный плеер ютуба.

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

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

Сам плеер будет размещен в div блоке <div id=”player”></div>. Идентификатор воспроизводимого видео вставляется в videoId: ‘Np_AsNAWVFQ’.  Это пример ссылки https://www.youtube.com/watch?v=Np_AsNAWVFQ

Оценить статью
(Пока оценок нет)

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

Войти с помощью: