MktoMunchkin :: 3 YouTube Players

by sanford

HTML

<script type="text/javascript">
    document.write(unescape("%3Cscript src='//munchkin.marketo.net/munchkin-beta.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script>
    Munchkin.init('410-XOR-673');

</script>
<div class="videos-container">
<div id="player" class="youtube-wrapper" data-video-id="M7lc1UVf-VE" data-video-width="640" data-video-height="340"></div>
<div id="player2" class="youtube-wrapper" data-video-id="tuSvnhcATUE" data-video-width="320" data-video-height="170"></div>
<div id="player3" class="youtube-wrapper" data-video-id="4PgW_X-7QNg" data-video-width="320" data-video-height="170"></div>
</div>

CSS

.videos-container {
	width: 800px;
}
.youtube-wrapper[data-video-width="640"] {
	border:8px solid transparent;
}
.youtube-wrapper[data-video-width="320"] {
	border:3px solid transparent;
}
.youtube-wrapper:nth-child(1){ border-color: chartreuse; }
.youtube-wrapper:nth-child(2){ border-color: fuchsia; }
.youtube-wrapper:nth-child(3){ border-color: cyan; }

JavaScript

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
document.getElementsByTagName('head')[0].appendChild(tag);

// 3. This function creates an <iframe> (and YouTube Player) after the API code downloads.
var players = [],
    interestingMomentSS = 10;

function onYouTubeIframeAPIReady() {
    [].forEach.call(document.querySelectorAll('.youtube-wrapper'), function(wrapper) {
        players.push({
            player: new YT.Player(wrapper, {
                width: wrapper.getAttribute('data-video-width'),
                height: wrapper.getAttribute('data-video-height'),
                videoId: wrapper.getAttribute('data-video-id'),
                events: {
                    'onStateChange': onPlayerStateChange
                }
            })
        });
    });
}

// 4. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {

    var player = event.target,
        state = event.data,
        videoId = player.getVideoData().video_id;

    if (player.getCurrentTime() >= interestingMomentSS && !player.loggedInterestingMoment) {
        console.log('YTMunchkin: IM time passed');
        Munchkin.munchkinFunction('clickLink', {
            href: '/munchkinVideoTracker/?video=' + videoId + '&movie-action=passed-im-mark'
        });
        player.loggedInterestingMoment = true;
    }

    switch (state) {
        case YT.PlayerState.PLAYING:
            console.log('YTMunchkin: playing');
            Munchkin.munchkinFunction('clickLink', {
                href: '/munchkinVideoTracker/?video=' + videoId + '&movie-action=pressed-play'
            });
            break;
        case YT.PlayerState.PAUSED:
            console.log('YTMunchkin: paused');
            Munchkin.munchkinFunction('clickLink', {
                href: '/munchkinVideoTracker/?video=' + videoId + '&movie-action=paused'
            });
           ...