YouTube Screenshots

[carbontwelve]

My current screenshot process doesn't look good for Youtube Profile pages or individual video snapshots:

Instead of taking a screenshot of the profile page I should use the opengraph data provided to obtain the channels image and generate a card with that image masked within a circle and the channel title next to it.

Check if the url is a youtube profile with the following function:

const isYouTubeProfile = (url) => {
    try {
        const urlObj = new URL(url);
        return urlObj.hostname === 'www.youtube.com' && 
               (urlObj.pathname.startsWith('/@') || 
                urlObj.pathname.startsWith('/channel/') || 
                urlObj.pathname.startsWith('/c/') ||
                urlObj.pathname.startsWith('/user/'));
    } catch {
        return false;
    }
};

Obtain image via open graph, fetch it if found and use as an asset in a custom html layout for generating the card. Maybe include images from their recent videos as well, make it look nice...