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

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

Самый распространенный и простой способ, это вставить iframe код, который предлагает сам ютуб. Ранее уже была статься про выравнивание 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 id="player"></div>
<script src="https://www.youtube.com/player_api"></script>
<script>
//Создаем плеер
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
width: '640',
height: '390',
videoId: 'Np_AsNAWVFQ',
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange
}
});
}
//Автозапуск воспроизведения
function onPlayerReady(event) {
event.target.playVideo();
}
//Кода закончилось видео
function onPlayerStateChange(event) {        
if(event.data === 0) {          
//Исполняем код   
alert('END');
}
}
</script>

//Создаем плеер

var player;

function onYouTubePlayerAPIReady() {

player = new YT.Player('player', {

width: '640',

height: '390',

videoId: 'Np_AsNAWVFQ',

events: {

onReady: onPlayerReady,

onStateChange: onPlayerStateChange

}

});

}

//Автозапуск воспроизведения

function onPlayerReady(event) {

event.target.playVideo();

}

//Кода закончилось видео

function onPlayerStateChange(event) {

if(event.data === 0) {

//Исполняем код

alert('END');

}

</script>

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