┌─────────────────────────────────────┐
│           Player Container          │
├─────────────────────────────────────┤
│  ┌─────────────────────────────────┐ │
│  │        Video Element            │ │
│  │    (HLS/MP4/WebM Support)      │ │
│  └─────────────────────────────────┘ │
│  ┌─────────────────────────────────┐ │
│  │      Control Interface          │ │
│  │  (Play/Pause/Volume/Progress)   │ │
│  └─────────────────────────────────┘ │
│  ┌─────────────────────────────────┐ │
│  │      Analytics Engine           │ │
│  │  (Engagement Tracking)          │ │
│  └─────────────────────────────────┘ │
└─────────────────────────────────────┘

https://player.hesedvid.com/v1/private/{publicID}/master.m3u8
https://player.hesedvid.com/v1/public/{org_id}/{env_id}/{vid_id}/master.m3u8

1
<iframe
2
  src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8"
3
  width="800"
4
  height="450"
5
  frameborder="0"
6
  allowfullscreen>
7
</iframe>

.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// Listen for player events
window.addEventListener('message', function(event) {
  // Verify origin for security
  if (event.origin !== 'https://player.hesedvid.com') {
    return;
  }

  const data = event.data;

  switch (data.type) {
    case 'playerReady':
      console.log('Player ready');
      break;

    case 'play':
      // Track play event
      analytics.track('video_play', {
        video_id: data.videoId,
        timestamp: Date.now()
      });
      break;

    case 'timeUpdate':
      // Update progress bar
      updateProgressBar(data.currentTime, data.duration);
      break;

    case 'ended':
      // Track completion
      analytics.track('video_complete', {
        video_id: data.videoId,
        duration: data.duration
      });
      break;
  }
});

// Send commands to player
function controlPlayer(command, data = {}) {
  const iframe = document.getElementById('player');
  iframe.contentWindow.postMessage({
    type: command,
    ...data
  }, 'https://player.hesedvid.com');
}

1
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?theme=light"></iframe>

1
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?theme=dark"></iframe>

1
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?theme=auto"></iframe>

1
<!-- Show HesedVid branding (default) -->
2
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?branding=true"></iframe>
3

4
<!-- Hide branding for white-label experience -->
5
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?branding=false"></iframe>

1
<meta http-equiv="Content-Security-Policy"
2
      content="frame-src https://player.hesedvid.com;">

window.addEventListener('message', function(event) {
  // Only accept messages from HesedVid player
  if (event.origin !== 'https://player.hesedvid.com') {
    return;
  }

  // Process message safely
  handlePlayerMessage(event.data);
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const iframe = entry.target;
      iframe.src = iframe.dataset.src;
      observer.unobserve(iframe);
    }
  });
});

document.querySelectorAll('[data-src]').forEach(iframe => {
  observer.observe(iframe);
});

1
<link rel="preconnect" href="https://player.hesedvid.com">
2
<link rel="dns-prefetch" href="https://player.hesedvid.com">

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://player.hesedvid.com') return;

  const data = event.data;

  // Send to your analytics service
  switch (data.type) {
    case 'play':
      gtag('event', 'video_play', {
        video_id: data.videoId,
        video_title: data.videoTitle
      });
      break;

    case 'timeUpdate':
      // Track progress milestones
      if (data.currentTime > 0 && data.currentTime % 30 === 0) {
        gtag('event', 'video_progress', {
          video_id: data.videoId,
          progress: Math.round(data.currentTime / data.duration * 100)
        });
      }
      break;
  }
});

window.addEventListener('message', function(event) {
  if (event.origin !== 'https://player.hesedvid.com') return;

  if (event.data.type === 'error') {
    const error = event.data.error;

    switch (error.type) {
      case 'VIDEO_NOT_FOUND':
        showErrorMessage('Video not found. Please check the video ID.');
        break;

      case 'ACCESS_DENIED':
        showErrorMessage('This video is private. Please contact the owner.');
        break;

      case 'NETWORK_ERROR':
        showErrorMessage('Network error. Please check your connection.');
        break;

      default:
        showErrorMessage('An error occurred while loading the video.');
    }
  }
});

/* Always use responsive containers */
.video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

1
<!-- Include proper accessibility attributes -->
2
<iframe
3
  src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8"
4
  title="Video: My Video Title"
5
  aria-label="Video player for My Video Title"
6
  allowfullscreen>
7
</iframe>

// Use lazy loading for better performance
const lazyPlayer = document.createElement('iframe');
lazyPlayer.dataset.src = 'https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8';
lazyPlayer.style.width = '100%';
lazyPlayer.style.height = '450px';
lazyPlayer.frameBorder = '0';
lazyPlayer.allowFullscreen = true;

// Load when visible
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

observer.observe(lazyPlayer);

1
<iframe src="https://player.hesedvid.com/v1/private/pubvid_AbCdEf/master.m3u8?debug=true"></iframe>