Embedding issues on Jekyll
My subtle dyslexic arse with a lack of dopamine gave up proofreading after multiple tries. If you see grammatical errors or some awkward sentences, move on. Use the context clues to understand my post, mate.
For a while, the embedding did not work on my website
When the issue happens on the website, the most challenging trickster is, “What the hell is the real problem.”
The first problem is no rendering.
My first guess: Instagram API changes
Instagram may change the API process. I searched for any new changes from the Meta developer page. https://developers.facebook.com/docs/instagram/oembed/
My main problem with embedding reels is that it still shows the iframe of the post bodies with no content loaded. This means the embedding script is still functional, but perhaps partially it’s rendered and partially blocked.
My second guess: Github blocked third-party embedding
According to his example and the result, Jekyll has no problem adopting the embeddings from other SNS media or content platforms. Then why am I still having the issue?
https://github.com/nathancy/jekyll-embed-video
My third guess: Cross-origin?
Nah. Consold.log did not puke any error vomits.
My fourth guess: Not allowing content sharing from my insta
After finding this article, I toggled around post-sharing options. Still, no chance to render accordingly.
My fifth guess: Async rendering fails
This guess was quite close to issuing. Ironically, I need help finding the search result with this async embed.js issue within the Jekyll community, but I found some folks talking about this at next.js, eleventy, and gatsby.
https://orbit.love/blog/how-to-add-twitter-and-instagram-embeds-on-an-eleventy-website-using-sanity
So I changed the async script like this:
from
<script async src="//www.tiktok.com/embed.js"></script>
to
<script async defer src="https://www.tiktok.com/embed.js" type="text/javascript"></script>
After this, I made a slightly better result. The content started rendering - however, it was very unstable. Sometimes it renders fine. Sometimes, not at all.
My sixth guess: Markdown + Obsidian + Jekyll integrated rendering stack.
Normally, I put the embed script within the “include template” because other devs from stack-overflow emphasise putting the embed.js script at the end and ensuring the block-quote section comes to the DOM first.
I need help getting it to work in my case.
My note is handled in Mark Down editor “Obsidian” first, and then Jekyll reads the.MD files to render into production pages, somehow the script tag that kicks in through Jekyll’s include function did not pass it as HTML markups but as plain text with the quotation.
So I migrated all embedding API scripts into the head.
And Viola! everything works beautifully.