Tracking Videos

var iframe = document.getElementById('player'); // replace with your iframe id
var player = new Vimeo.Player(iframe);
var videoName = "Sample Video"; 

player.on('play', function() {
  _kmq.push(['record', 'Played Video', {'Played Video Name': videoName}]);
});

player.on('pause', function() {
  _kmq.push(['record', 'Paused Video', {'Paused Video Name': videoName}]);
});

player.on('ended', function() {
  _kmq.push(['record', 'Finished Video', {'Finished Video Name': videoName}]);
});

<div class="wistia_embed wistia_async_YOUR_VIDEO_ID" style="width:640px;height:360px;"></div>
<script src="https://fast.wistia.net/assets/external/E-v1.js" async></script>

<script type="text/javascript">
    // Initialize the Wistia queue (window._wq) if it doesn't already exist
    window._wq = window._wq || [];

    // Push an object into the Wistia queue that contains the video ID and an onReady function
    _wq.push({
        id: YOUR_VIDEO_ID, // Replace YOUR_VIDEO_ID with the actual ID of your Wistia video

        // This function will run once the video is ready
        onReady: function (video) {
            // Call the function to set up Kissmetrics tracking for the video
            loadKMTrackableVideo(video, "Sample Wistia Video"); // The second parameter is the name of the video being tracked
        }
    });

    // Function to bind Kissmetrics events to the Wistia video
    function loadKMTrackableVideo(wistia_object, videoName) {
        // Bind a function to the "play" event to record a Kissmetrics event when the video starts playing
        wistia_object.bind("play", function () {
            _kmq.push(['record', 'Played Video', {'Played Video Name': videoName}]);
        });

        // Bind a function to the "pause" event to record a Kissmetrics event when the video is paused
        wistia_object.bind("pause", function () {
            _kmq.push(['record', 'Paused Video', {'Paused Video Name': videoName}]);
        });

        // Bind a function to the "end" event to record a Kissmetrics event when the video finishes playing
        wistia_object.bind("end", function () {
            _kmq.push(['record', 'Finished Video', {'Finished Video Name': videoName}]);
        });
    }
</script>

//The <iframe> (and video player) will replace this <div> tag.
<div id="player"></div> 
  <script type='text/javascript'>
    // This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // This function creates an <iframe> (and YouTube player) after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE', // Replace with the desired video ID
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      // Add hooks for what you want to happen when the player has loaded
    }
  </script>

<script type="text/javascript">
var _kmq = _kmq || [];
function onPlayerStateChange(event) {
  switch(event.data) {
    case YT.PlayerState.PLAYING:
      _kmq.push(['record', 'Played Video', 
                {'Played Video Name':player.getVideoData().title}]);
      break;
    case YT.PlayerState.PAUSED:
      _kmq.push(['record', 'Paused Video', 
                {'Paused Video Name':player.getVideoData().title}]);
      break;
    case YT.PlayerState.ENDED:
      _kmq.push(['record', 'Finished Video', 
                {'Finished Video Name':player.getVideoData().title}]);
      break;
    default:
      return;
  }
}
</script>