tim_tairan

Сам задал сам ответил.

var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100%',
width: '100%',
videoId: 'V4o01AIt5sM',
events: {
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event) {
if(event.data ==0){
alert('Video Ended;')
}
}

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

Всем спасибо, все свободны :)
Решение нашёл сам, и так мы делаем в css нужному нам элементу к примеру div -webkit-clip-path: polygon (нужные нам координаты). Но оно не работает в firefox... МЫ берём следующий скрипт https://github.com/andrusieczko/clip-path-polygon. И ура! Всё работает как нам надо пропорции сохраняются т.к. данные заданы в процентах, а скрипт пересчитывает их.
А вот анимировать уже не тяжело, разберётесь)

Если стоит задача именно в переходе красивом то можно так:
https://github.com/peachananr/onepage-scroll
https://github.com/alvarotrigo/fullPage.js
tympanus.net/Development/ArticleIntroEffects/index...

А по факту адаптивности дизайна то bootstrap в зубы и поехал:
getbootstrap.com

Был выбран другой слайдер для реализации данной возможности globocom.github.io/destaque
метод goTo(index).