Как сделать ссылки шаринга по окончанию видео?

Question

[BackSpark]

На этой странице есть видео ютуб marketium.ru/malyshka-plakala-navzryd-3 если его до конца досмотреть, то появится окно с кнопками репоста ВК и ФБ. Как реализовать подобное?

Answer 1

[Антон Робуль]

Для этого нужно подключать видео с помощью youtube JS API и ловить событие окончания просмотра, делается это следующим образом:

<div id="player"></div>

<script src="http://www.youtube.com/player_api"></script>
function onYouTubePlayerAPIReady() {
    player = new YT.Player("player", {
        height: "450",
        width: "800",
        playerVars: {
            'start': 00,
            'end': 00,
            'theme': 'light',
            'rel': 0
        },

        videoId: "FH3hIggyJ-U",
        events: {
            onStateChange: onPlayerStateChange
        }
    })
}
function onPlayerStateChange(a) {
    if (a.data === 0) {
        videoEnded();
    }
};


function videoEnded() {
    // здесь пишем код функции по окончанию просмотра видео
}

в случае с указанным Ваши сайтом, окно показывается в слое .videoWindowContent в котором определены две кнопки шаринга:

function videoEnded() {
    	if ($(window).width() < 728) {
    	    	$(".videoWindowContent").css("marginTop", $("#player").height() / 2 -  $(".videoWindowContent").height() / 2);
    	}
    	$(".videoWindowContent").stop().fadeIn(300)
    }