Implementing Dual Rendering of YouTube Shortcodes in timeline and Hugo

I wrote a very simple plugin / Hugo shortcode that replaces in articles any shortcode that contains {{< youtube "VIDEO_ID" >}} with the proper HTML code needed to display an embedded YouTube video player.

The problem is that the HTML code is also visible on the timeline.
As in this example:

Is there a way to tell to convert that shortcode in two different ways, one for the HTML rendering in Hugo and one for the timeline on ?

I’d like to show it in timeline this way:

Schermata 2023-07-08 alle 11.53.56

If that is not yet possible, may I suggest to use a data property in HTML to handle this, as data-mb-replace for example?
This would allow to keep the Hugo shortcode format, as the data-* property should be transparent to Hugo, and still allows Manton to easily replace it with a different string in the timeline.

This is an example of what I mean:

<div data-mb-replace="">
        .embed-container { 
            position: relative; padding-bottom: 56.25%; height: 0; 
            overflow: hidden; max-width: 100%; 
        .embed-container iframe, .embed-container object, 
        .embed-container embed { 
            position: absolute; top: 0; left: 0; 
            width: 100%; height: 100%; 
    <div class="embed-container">
        <iframe src="" 
            frameborder='0' allowfullscreen>
1 Like

Thanks, I don’t think I had seen <style> used inside a post like that. As a first step, I’ll fix to strip it out when it needs to truncate a post, which looks like what is happening here.

Another thing @manton
On the Mac client when I browse the list of articles, the left angle bracket is still represented by &lt;

Here’s an example:

Yes, I should probably find a way in my plug-in to put the CSS selectors in a file and load it in the header

There may be reasons to make your own but there is a built in Hugo shortcode for YouTube and I bet that you’re asking for trouble using the same name for yours.