https://eladoffer.com/js/commercials.js?v=5

1// Commercial advertising work — uniform poster grid, click to play in a modal.
2// Video list and thumbnails sourced from Elad's Vimeo showcase
3// (vimeo.com/showcase/12321333) — "Elad Offer Website Commercials List", his
4// master list for this section. That showcase is just the reference list of
5// which videos belong here, not something this page talks to at runtime.
6// Each video below is embedded directly via its own player URL + unlisted
7// hash (fetched once via the Vimeo API), same reasoning as the music page:
8// thumbnails are downloaded into commercial-thumbs/ so there's no fetch
9// delay and no dependency on Vimeo being reachable just to see the grid.
10const commercials = [
11  { id: '1110633515', h: 'c171d7c626', brand: 'Bono: Stories of Surrender', campaign: 'Immersive Trailer (Apple Vision Pro)', role: 'Director (Immersive Version)', duration: '3:10', w: 1920, h_px: 1080 },
12  { id: '1106945186', h: '39a2eecd0d', brand: 'DoorDash', campaign: 'All the Ads', role: 'Creative Director', duration: '0:30', w: 1920, h_px: 1080 },
13  { id: '825240826', h: '0807d18e98', brand: 'Mercedes-Benz', campaign: 'G-Wagon Electric — "Super"', role: 'Creative Director', duration: '0:30', w: 1920, h_px: 1080 },
14  { id: '825233897', h: 'c3bc13e679', brand: 'Mercedes-Benz', campaign: 'EQS — "Magnificent"', role: 'Director', duration: '0:30', w: 1920, h_px: 1080 },
15  { id: '825233216', h: 'a8accfcfdb', brand: 'Mercedes-Benz', campaign: 'EQE — "Waves"', role: 'Director', duration: '0:18', w: 1080, h_px: 1920 },
16  { id: '825232970', h: '3b48ad0718', brand: 'Mercedes-Benz', campaign: 'EQE — "Lines"', role: 'Director', duration: '0:16', w: 1080, h_px: 1920 },
17  { id: '795596760', h: 'd160628b9b', brand: 'NIO', campaign: 'ET5 — Launch Day', role: 'Flame Lead', duration: '1:04', w: 1920, h_px: 1080 },
18  { id: '659516433', h: '081e3f06fa', brand: 'FX Network', campaign: 'Mayans M.C. — Season 3 Teaser', role: 'Flame Lead', duration: '1:00', w: 1280, h_px: 720 },
19  { id: '659516426', h: '67be8b0876', brand: 'Toyota', campaign: "Let's Bring Home the Love", role: 'Flame Lead', duration: '1:00', w: 1920, h_px: 1080 },
20  { id: '317123902', h: '049891f387', brand: "Buchanan's Whiskey", campaign: 'Where Greatness Lives', role: 'VFX Supervisor', duration: '0:30', w: 960, h_px: 540 },
21  { id: '317122488', h: '3f42dfa5b0', brand: 'Franklin Templeton', campaign: '"Goals"', role: 'VFX Supervisor', duration: '0:30', w: 1920, h_px: 1080 },
22  { id: '168725481', h: '21aded4074', brand: 'Honda', campaign: 'Happy Honda Days — Kids', role: 'Flame Lead', duration: '0:30', w: 1920, h_px: 1080 },
23  { id: '167956264', h: 'f6877c7f41', brand: 'Toyota', campaign: 'Prius V — More Efficient', role: 'Flame Lead', duration: '0:32', w: 1920, h_px: 1080 },
24  { id: '162464837', h: '3e84226589', brand: 'Outkast', campaign: 'Hey Ya', role: 'VFX Supervisor', duration: '5:02', w: 640, h_px: 480 },
25  { id: '162317663', h: '2d27753337', brand: 'Anger Management', campaign: 'Promo', role: 'Flame Lead', duration: '0:32', w: 1920, h_px: 1080 },
26  { id: '148289280', h: 'acf138fe9e', brand: 'Honda', campaign: 'Race', role: 'Creative Director', duration: '0:31', w: 1920, h_px: 1080 },
27  { id: '833781034', h: '21e8d9a8d6', brand: 'Coca-Cola', campaign: '"Border"', role: 'Flame Lead', duration: '1:00', w: 1920, h_px: 1080 },
28  { id: '144153285', h: '94db05c18c', brand: 'Honda', campaign: 'The Power of Dreams — Slapshot', role: 'Creative Director', duration: '1:00', w: 1280, h_px: 720 },
29  { id: '144150511', h: '7f3713337a', brand: 'Fiat', campaign: 'Fiat 500 — "Puff Daddy"', role: 'Creative Director', duration: '0:31', w: 1280, h_px: 720 },
30  { id: '29995584', h: '395addb4e5', brand: 'Nike', campaign: 'LeBron — The Beginning', role: 'Creative Director', duration: '1:00', w: 1920, h_px: 1080 },
31  { id: '1208902176', h: '6d87da689d', brand: 'Old Navy', campaign: 'Anthem', role: 'On-set VFX Supervisor', duration: '0:15', w: 1920, h_px: 1080 },
32  { id: '1208902177', h: '7d76ed6e42', brand: 'RAID: Shadow Legends', campaign: 'Jeff Goldblum Picks a Team', role: 'On-set VFX Supervisor', duration: '1:03', w: 1920, h_px: 1080 },
33];
34
35const grid = document.getElementById('commercials-grid');
36
37const revealObserver = new IntersectionObserver((entries) => {

38  entries.forEach(entry => {
39    if (entry.isIntersecting) {
40      entry.target.classList.add('loaded');
41      revealObserver.unobserve(entry.target);
42    }
43  });
44}, { rootMargin: '0px 0px -60px 0px' });
45
46commercials.forEach(c => {
47  const tile = document.createElement('div');
48  tile.className = 'cm-tile';
49
50  const img = document.createElement('img');
51  img.src = `commercial-thumbs/${c.id}.jpg`;
52  img.alt = `${c.brand} — ${c.campaign} — ${c.role}`;
53  img.loading = 'lazy';
54  img.addEventListener('load', () => img.classList.add('loaded'));
55  img.addEventListener('error', () => tile.remove());
56  tile.appendChild(img);
57
58  const overlay = document.createElement('div');
59  overlay.className = 'cm-overlay';
60  overlay.innerHTML = `
61    <p class="cm-campaign">${c.campaign}</p>
62    <p class="cm-brand">${c.brand}</p>
63    <p class="cm-role">${c.role}</p>
64  `;
65  tile.appendChild(overlay);
66
67  const play = document.createElement('div');
68  play.className = 'cm-play';
69  tile.appendChild(play);
70
71  const duration = document.createElement('span');
72  duration.className = 'cm-duration';
73  duration.textContent = c.duration;
74  tile.appendChild(duration);
75
76  tile.title = `${c.brand} — ${c.campaign} · ${c.role}`;
77  tile.addEventListener('click', () => openModal(c.id, c.h));
78
79  grid.appendChild(tile);
80  revealObserver.observe(img);
81});
82
83const modal = document.getElementById('cm-modal');
84const frame = document.getElementById('cm-frame');
85
86function openModal(id, h) {
87  frame.src = `https://player.vimeo.com/video/${id}?h=${h}&autoplay=1`;
88  modal.classList.add('open');
89  document.body.style.overflow = 'hidden';
90}
91
92function closeModal() {
93  modal.classList.remove('open');
94  frame.src = '';
95  document.body.style.overflow = '';
96}
97
98document.getElementById('cm-close').addEventListener('click', closeModal);
99modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });
100document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeModal(); });