below the video element place a text-block with:
[video_description id="6rWjoqkKG7o"]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;
}