eleventy-plugin-embed-tiktok

    1.1.3 • Public • Published

    eleventy-plugin-embed-tiktok

    NPM Version Build test status
    MIT License Contributor Covenant

    This Eleventy plugin automatically embeds TikTok videos from URLs in markdown files.

    Install in Eleventy

    In your Eleventy project, install the plugin through npm:

    $ npm i eleventy-plugin-embed-tiktok

    Then add it to your Eleventy config file (usually .eleventy.js):

    const embedTikTok = require("eleventy-plugin-embed-tiktok");
    
    module.exports = function(eleventyConfig) {
      eleventyConfig.addPlugin(embedTikTok);
    };

    Usage

    To embed a TikTok video into any markdown page, paste its URL into a new line. The URL should be the only thing on that line.

    Markdown file example:

    ...
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.
    
    https://www.tiktok.com/@guiltyaesthetic/video/6806676200652655877
    
    Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.
    
    ...

    Result:

    Screenshot of a TikTok video of the last day of high school, 1998

    The plugin supports common URL variants as well. These will also work:

    <!-- No protocol: -->
    
    tiktok.com/@guiltyaesthetic/video/6806676200652655877
    www.tiktok.com/@guiltyaesthetic/video/6806676200652655877
    
    <!-- With or without HTTPS: -->
    
    https://www.tiktok.com/@guiltyaesthetic/video/6806676200652655877
    http://www.tiktok.com/@guiltyaesthetic/video/6806676200652655877
    
    <!-- With or without 'www': -->
    
    https://www.tiktok.com/@guiltyaesthetic/video/6806676200652655877
    https://tiktok.com/@guiltyaesthetic/video/6806676200652655877
    
    <!-- URLs with extra parameters: -->
    https://www.tiktok.com/@guiltyaesthetic/video/6806676200652655877?lang=en
    

    Notes and caveats

    • This plugin is deliberately designed only to embed when the URL is on its own line, and not inline with other text.
    • To do this, it uses a regular expression to recognize TikTok URLs, wrapped in an HTML <p> tag. If your Markdown parser produces any other output, it won’t be recognized.
    • I’ve tried to accommodate common URL variants, but there are conceivably valid TikTok URLs that wouldn’t get recognized. Please file an issue if you run into an edge case!
    • This plugin uses transforms, so it alters Eleventy’s HTML output as it’s generated. It doesn’t alter the source markdown.
    • By necessity, this plugin will add a call to TikTok’s third-party JavaScript file. It does this once per page, if that page contains one or more TikTok embeds.
    • TikTok’s embed script applies a bunch of styles. For now this plugin uses TikTok’s default styling, which has has max-width of 605 pixels and a min-width of 325 pixels.

    Install

    npm i eleventy-plugin-embed-tiktok

    DownloadsWeekly Downloads

    231

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    15

    Last publish

    Collaborators

    • gfscott