Embedding videos with jekyll-notion

Not every block in a Notion page can be transformed to markdown. Specifically, an embedded video cannot be added to the resulting markdown file. This is because it is not supported in either the basic or extended markdown syntax. Thus, the notion_to_md gem does not do so.

To bypass this constraint, we can extend the NotionToMd::Blocks::Types (here) class in the notion_to_md gem by adding a new method called video. The video method corresponds to the Notion block that contains an embedded video in the document.

Note that each class method in NotionToMd::Blocks:Types corresponds to a Notion block type. You can find a full list of Notion blocks here.

To open the Types class, you need to create a file with the same module and class name as the one in the notion_to_md gem:

module NotionToMd
  module Blocks
    class Types
      class << self
        def video(block)
          case block.external.url
          when /youtube/
            params = URI(block.external.url).query
            youtube_id = CGI::parse(params)['v'].first
            "{% include youtubePlayer.html id='#{youtube_id}' %}"
          when /vimeo/
            vimeo_id = URI(block.external.url).path[1..]
            "{% include vimeoPlayer.html id='#{vimeo_id}' %}"
          when /dailymotion/
            daily_motion_id = URI(block.external.url).path.split('/').last
            "{% include dailymotionPlayer.html id='#{daily_motion_id}' %}"
          end
        end
      end
    end
  end
end

In this case, I have decided to support videos from YouTube, Vimeo, and DailyMotion.

From now on, each video embedded on any Notion page will be transformed into a Liquid include statement.

You can find the templates for each video format in the GitHub repository jekyll-embed-video. Download the templates and save them to the _includes directory.

Okay, now that we have the templates set up, what about the patched class? Where should it be placed?

Well, to ensure that Jekyll is aware of the modifications made to the gem, we need to use Jekyll’s plugin feature. This way, every file within the _plugins folder will be automatically loaded into memory by Jekyll.

Alright, save the snippet above at _plugins/notion_to_md/blocks/types.rb. Although the folder in which a file is placed is not important for monkey patching (another term for opening a class), I prefer to keep the folder structure aligned with the module structure. Anyway, if you prefer, you can save the file with whatever name you like, as long as the module nesting does not change. Otherwise, the patch won’t work.

Overall, the file structure should look like this.

├── _includes
│   ├── dailymotionPlayer.html
│   ├── vimeoPlayer.html
│   └── youtubePlayer.html
└── _plugins
    └── notion_to_md
        └── blocks
            └── types.rb

You can see what it looks like in this post.

And there you go! The next time you run Jekyll, the embedded videos in your Notion pages will also be embedded in your web page.