add description to video elements for accessibility

but if it is a youtube video – why not implementing descriptive text on uploading it to yt?
I use vimeo – but i can insert on the vimeo backend a lot of info to the videos.

Subject: How to add a descriptive text to your YouTube uploads

Yes, there is a dedicated way to do this! When you upload a video, you use the “Description” field. This is one of the most important steps for making your video discoverable.

Where to find it:

During Upload: In YouTube Studio, the Description box appears right below the Video Title.

After Uploading: You can edit it anytime by going to your Content tab in YouTube Studio, clicking the pencil icon (Details) on your video, and updating the text.

Why it matters:

SEO (Search Engine Optimization): YouTube’s algorithm uses this text to understand your content and show it in search results.

User Engagement: You can include links to your website, social media, or products.

Accessibility: It helps screen readers describe the video content to visually impaired users.

Best Practices for your description:

The Hook: The first two lines are the most important because they appear before the “Show More” button. Put your most vital info or call-to-action here.

Timestamps (Chapters): If you type timestamps like 02:15 – Chapter Name, YouTube will automatically create clickable segments in the video player.

Keywords: Use natural language to describe the video, including words people might type into the search bar.

Hashtags: Add 2–3 relevant hashtags at the bottom (e.g., #Tutorial #Vlog) to help with categorization.

Pro Tip: If you want to save time, go to Settings > Upload Defaults. You can save a template (like your social media links) that will automatically appear in the description box every time you upload a new video.

sometimes the way via youtube api v3 does not work – even if you have connected your billing details with that api.

place a snippet to your child-theme funcions.php:
– Registering the shortcode for the descriptive text (without api use – and google costs ;)

/**
 * Final Version: Fetches YouTube description and converts links correctly
 * preventing double-tagging or broken HTML.
 */
function get_yt_description_final($atts) {
    $a = shortcode_atts(array('id' => ''), $atts);
    if (empty($a['id'])) return 'Video ID missing.';

    $v_id = esc_attr($a['id']);
    
    // Use a fresh cache key to overwrite the broken HTML in your database
    $transient_key = 'yt_desc_v3_clean_' . $v_id;
    $description = get_transient($transient_key);

    if (false === $description) {
        $response = wp_remote_get("https://www.youtube.com/watch?v=" . $v_id, array(
            'user-agent' => 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36'
        ));

        if (is_wp_error($response)) return 'YouTube connection error.';

        $html = wp_remote_retrieve_body($response);

        if (preg_match('/"shortDescription":"(.+?)"/', $html, $matches)) {
            $description = $matches[1];
            
            // Decode unicode characters
            $description = json_decode('"' . $description . '"');
            
            // Clean up backslashes before storing
            $description = stripslashes($description);
            
            set_transient($transient_key, $description, DAY_IN_SECONDS);
        } else {
            return 'Description currently unavailable.';
        }
    }

    // 1. First: Escape the raw text to be safe from XSS
    $safe_desc = esc_html($description);

    // 2. Second: Convert URLs into clickable links using a more precise regex
    // This regex matches URLs starting with http or https
    $pattern = '~(?<!["\'>])\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))~';
    $clickable_desc = preg_replace($pattern, '<a href="$0" target="_blank" rel="nofollow">$0</a>', $safe_desc);

    // 3. Output the result
    return '<div class="yt-desc-box" style="white-space: pre-wrap; word-break: break-word; background:#f9f9f9; padding:20px; border-radius:5px; border:1px solid #ddd; height:350px; overflow-y:auto;">' 
           . $clickable_desc . 
           '</div>';
}
add_shortcode('video_description', 'get_yt_description_final');

after that – place a shortcode under your embedded video:
[video_description id="youtube-ID"]

see: https://webers-testseite.de/videos/
( there you can easily copy&paste the needed code – and see examples )

because i do not believe that this is GDPR konform – i block it til you accept to see the youtube video.