Healthfirst’s previous video library and player were limited because uploaded videos were being automatically resized to a fuzzy resolution that made the videos illegible. They were also being stored on a server that wasn’t owned by the company.

Therefore, I created a custom video player coded with HTML5, CSS, jQuery, JavaScript, and PHP. The video player displays titles and captions and creates a thumbnail that gets placed in the appropriate video playlist. It also adds IDs and classes dynamically generated by the video titles to the HTML so that any corresponding clicks on the video player will show up as event categories in Google Analtyics.

The employee can click on the play button or the video player frame to pause and play the video, while detecting where the user clicked to determine actual video plays, not including video pauses, for analytics set up through Google Analytics and Google Tag Manager.

To make Google Tag Manager work again after I added customizations to the video player, I wrote a script to create a custom object that sends video plays as event categories based on the video’s dynamically generated title.