Google Analytics and KissMetrics Video Tracking

For Youtube and HTML5 Videos

HTML5: Responsive (aspect ratio) Video

<div class="video-ratio">
    <video data-track-video="html5" poster="assets/vid/demo.jpg" controls loop data-title="The Roar of Digital Card" data-gacategory="video card">
        <source src="assets/vid/demo.mp4" type="video/mp4" />
        <object type="application/x-shockwave-flash" data="assets/swf/flowplayer-3.2.18.swf" width="640" height="360">
            <param name="movie" value="assets/swf/flowplayer-3.2.18.swf" />
            <param name="allowFullScreen" value="true" />
            <param name="wmode" value="transparent" />
            <param name="loop" value="true" />
            <param name="flashVars" value="config={'playlist':['assets%2Fvid%2Fdemo.mp4',{'url':'assets%2Fvid%2Fdemo.jpg','autoPlay':false}]}" />
            <img src="assets/vid/demo.jpg" width="640" height="360" title="No Flash found" />
        </object>
    </video>
</div>
.video-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    
    iframe, object, video, embed {     
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
$(document).ready(function(){
    $('[data-track-video="html5"]').trackVideo();
});

// Enabling Kissmetrics tracking
$(document).ready(function(){
    $('[data-track-video="html5"]').trackVideo({
        kissmetrics: true
    });
});

Youtube: Responsive (aspect ratio) Video

<div class="video-ratio">
    <div data-track-video="youtube" id="player-MgmulbyfMEU" data-height="390" data-width="640"></div>
</div>
.video-ratio {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    
    iframe, object, video, embed {     
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
$(document).ready(function(){
    $('[data-track-video="youtube"]').trackVideo({
        playerVars: {
            'rel': 0,
            'showinfo': 1
        }
    });
});