Shortcode for youtube embed and schema

hilaryaq · 2021-06-17 11:04:37

Hi all! I’m so excited today because my husband put together a bit of js for me with the YouTube API that lets me put the id of a video into an input field, and then generate a shortcode that works with a dedicated form to output YouTube videos:

- From the ‘nocookie’ embed url
- In a format that my js can hook into that replaces the video with the thumb (page speed)

In my js I’m looking for the class youtube, then using the data-embed attribute to build the iframe for the YT embed.

Posting the code below, I’m thinking I’ll upload the tag generator to Github also, it’s not checked for security or anything, it’s something you’d just run on your local machine and you need a Google developer API key to make the calls (very easy to get)

In a form called media_video (thanks for the very helpful example with html5 video tag!)

<div class="youtube" data-embed="<txp:yield name="dataembed" />" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
<meta itemprop="duration" content="<txp:yield name="duration" />" />
<meta itemprop="uploadDate" content="<txp:yield name="uploaddate" />"/>
<meta itemprop="thumbnailURL" content="<txp:yield name="thumbnailurl" />" />
<meta itemprop="embedURL" content="<txp:yield name="embedurl" />" />
<div class="play-button"></div>
<meta itemprop="name" content="<txp:yield name="name" />" />
<meta itemprop="description" content="<txp:yield name="description" />" />
</div>

My shortcode (generated by an API call and copied/pasted into article):

<txp::media_video name="Local business SEO tips & tricks" description="In today’s blog, I discuss ranking your website well in Google Search Engine Result Pages specifically. We call these SERPs. Maps listings are also covered which are managed by Google my Business." embedurl="https://www.youtube-nocookie.com/embed/EnzBdKXiqe0" thumbnailurl="https://i.ytimg.com/vi/EnzBdKXiqe0/hqdefault.jpg" uploaddate="2021-06-15T19:52:17Z" duration="PT1M54S" dataembed="EnzBdKXiqe0"/>

I’m just putting a drive link here where you can see how I’m generating the tag: drive.google.com/file/d/1qBMQEQIZbRNz74sjkwVDS-ZLFm4Xk717/view?usp=sharing

You can run it through the rich content tester with Google and see it returns positive for video mark up and is eligible for any enhanced listings for that.

Now the caveat, if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit I think as to what even is that lol, so if you do have emojis in your video description you’d just need to re-write it in the tag first. Otherwise it works really well and I could see myself using custom tag generation a lot as a time saver as the way you’d need things is so specific.

Shortcodes are GREAT!

Edit: added code formatting.

Hilary edit: Emoji sitch looks to be just a utf issue, wouldn’t happen with newer txp installs so possibly could have emojis in description on newer build. :)

Last edited by hilaryaq (2021-06-17 16:13:46)

Bloke · 2021-06-17 11:44:40

Very cool!

hilaryaq wrote #330524:

if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit

Remember you have access to the escape attribute in all tags now, so if certain things are causing hassle, you can strip them out.

Shortcodes are GREAT!

I concur :)

etc · 2021-06-17 11:46:11

hilaryaq wrote #330524:

Now the caveat, if you have an emoji in the YT description, this breaks the shortcode tag as Txp freaks out a bit I think as to what even is that lol, so if you do have emojis in your video description you’d just need to re-write it in the tag first.

Txp itself is emoji-friendly, isn’t it rather <meta /> tag that is complaining?

etc · 2021-06-17 11:53:47

Bloke wrote #330525:

Remember you have access to the escape attribute in all tags now

Currently escape="html" encodes only HTML special chars. Should we consider tidy, html as htmlentities()?

Bloke · 2021-06-17 11:54:49

etc wrote #330528:

Should we consider tidy, html as htmlentities()?

That’s a neat idea.

hilaryaq · 2021-06-17 12:06:47

Thanks all!

We did test an emoji on it’s own with text before and after in a normal txp article, and when published none of the text displayed so I figured it was a txp thing, but maybe it was a versioning thing? I wonder would an upgrade give me emojis?!

Bloke · 2021-06-17 12:24:01

How did you put the emoji into your article? Paste it in as-is? As a unicode sequence?

Certainly support wasn’t added to Txp until, what, 4.6 or 4.7 (I think), but it might also be to do with your table collation. utf8-mb4 is standard now.

hilaryaq · 2021-06-17 12:38:42

Pasted it in, like copy paste and it shows as a visual emoji on the article, I am on 4.7 but must upgrade to 8 alright!

etc · 2021-06-17 12:54:04

Bloke wrote #330529:

That’s a neat idea.

Even maybe mb_encode_numericentity(), to encode emojis too.

Bloke · 2021-06-17 13:05:01

etc wrote #330534:

Even maybe mb_encode_numericentity(), to encode emojis too.

Whatever you think is best is fine with me!

hilaryaq · 2021-06-17 13:10:37

Oooo I sense toys coming thanks etc and stef!!!

hilaryaq · 2021-06-17 13:11:39

Is there anyway to fix the utf8-mb4 Stef do you know and would that fix emojis in a normal article usage or is it an upgrade you think?

Textpattern CMS

Textpattern CMS support forum

#1 2021-06-17 11:04:37