sampleColorFromVideo.js

const sampleColorFromVideo = (video, x, y) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    const width = video.clientWidth;
    const height = video.clientHeight;

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);

    context.drawImage(video, 0, 0, width, height);

    const pixels = context.getImageData(x, y, 1, 1).data;

    return [pixels[0], pixels[1], pixels[2]];
};

document
    .querySelector('#flip-jacks-video')
    .addEventListener('loadeddata', () => {
        document.querySelector(
            '#flip-jacks'
        ).style.backgroundColor = `rgb(${sampleColorFromVideo(
            document.querySelector('#flip-jacks-video'),
            0,
            0
        ).join(',')})`;
    });