{{ accessibilityShowContentBlockerModalIconExplained }}

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen
below the video element place a text-block with:

[video_description id="6rWjoqkKG7o"]
{{ accessibilityShowContentBlockerModalIconExplained }}

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen
below the video element place a text-block with:

[video_description id="D5UFbOC9ndw"]

this is just placed for SEO purpose 
and text-block got that custom class: 
visually-hidden
#top .visually-hidden .yt-desc-box {
  border: 0 !important;
  clip: rect(0 0 0 0);
  height: 1px !important;
  margin: -1px;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  width: 1px;
}

Registering the shortcode

(for child-theme functions.php)

/**
 * Final Version: Fetches YouTube description and converts links correctly
 * preventing double-tagging or broken HTML.
 */
function get_yt_description_final_v3($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:#f0f0f0; 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_v3');

The CSS for the box

mainly it is ruled by the snippet itself – if you like to overwrite that …

/* === maybe you restrict the height - and let scroll you to more content === */
/* === change the values inside the snippet to your needs === */

.yt-desc-box {
  height: 350px !important;
  overflow-y: auto; 
  border-left: 4px solid #ff0000;
  scrollbar-width: thin; /* only for Firefox */
  scrollbar-color: #ccc #f9f9f9; /* only for Firefox */
}

/* Scrollbar-Design for Chrome, Edge & Safari */
.yt-desc-box::-webkit-scrollbar {
  width: 8px;
}
.yt-desc-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
.yt-desc-box::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}
.yt-desc-box::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}