Posthog tracking for video embeds starts

src/components/video-embed/index.tsx

@@ -15,6 +15,7 @@ import {
 	useMilestones,
 } from './helpers'
 import s from './video-embed.module.css'
+import { trackVideoStart } from 'lib/posthog-events'
 
 /**
  * MAX_PLAYBACK_SPEED is based on max speeds for YouTube & Wistia.
@@ -142,6 +143,9 @@ function VideoEmbed({
 					{...reactPlayerProps}
 					config={config}
 					url={url}
+					onStart={() => {
+						trackVideoStart(url)
+					}}
 					onDuration={setDuration}
 					progressInterval={PROGRESS_INTERVAL}
 					onProgress={({ playedSeconds }: { playedSeconds: number }) => {

src/layouts/sidebar-sidecar/utils/_local_platform-docs-mdx/index.tsx

@@ -7,6 +7,7 @@ import React from 'react'
 import { DocsEnterpriseAlert } from './components/enterprise-alert'
 import Image from 'components/image'
 import { ImageProps } from 'components/image/types'
+import VideoEmbed from 'components/video-embed'
 
 // This function returns a simple object containing the default components
 // The `additionalComponents` param is purely for convenience.
@@ -37,5 +38,6 @@ function _defaultComponents() {
 	return {
 		EnterpriseAlert: DocsEnterpriseAlert,
 		img: makeImageElement({ noBorder: true }),
+		VideoEmbed,
 	}
 }

src/lib/posthog-events.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+/**
+ * Enables PostHog video start tracking
+ */
+export function trackVideoStart(video_id: string) {
+	if (!window?.posthog) return
+	window.posthog.capture('video_start', { video_id })
+}