Implementing Dual Rendering of YouTube Shortcodes in Micro.blog timeline and Hugo

[cesco]

I wrote a very simple Micro.blog 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 micro.blog timeline.
As in this example:

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

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

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="https://www.youtube.com/embed/ZrupdDIyoz0">
    <style> 
        .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%; 
        }
    </style>
    <div class="embed-container">
        <iframe src="https://www.youtube.com/embed/ZrupdDIyoz0" 
            frameborder='0' allowfullscreen>
        </iframe>
    </div>
</div>

[manton]

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

[cesco]

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

Here’s an example:

[cesco]

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

[jsonbecker]

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.