Markdown Videos

Have you ever wished the markdown image syntax would be able to render more than just images?

markdown_videos helps you with that dream, and renders automatically your markdown image syntax elements to the appropriate embed video service HTML markup.

$ gem install markdown_videos

or add it to your Gemfile

gem "markdown_videos"

and do

$ bundle install

require "markdown_videos" # if you don't use bundler

markdown_text = "![my youtube video](https://youtu.be/StTqXEQ2l-Y)"
html_rendered = MarkdownVideos.render(markdown_text)

puts html_rendered.to_s

<iframe width="560" height="315" title="a title" src="https://www.youtube.com/embed/StTqXEQ2l-Y" frameborder="0" allowfullscreen></iframe>

You should use it before any other Markdown renderer.

You can add optional parameters to render:

• :wrapper wraps the HTML embed element with the given string, %s must be present
• :class_name add a class attribute to HTML embed element

Example:

MarkdownVideos.render(markdown_text, wrapper: '<p class="flex-video">%s</p>', class_name: "embed-video")

Example: create an initializer file to override default options and make the renderer Bootstrap friendly.

MarkdownVideos.configure do |config|

  # For bootstrap css framework support by default
  config.wrapper = '<p class="embed-responsive embed-responsive-16by9">%s</p>'
  config.class_name = 'embed-responsive-item'

end

• Youtube
  • https://youtu.be/StTqXEQ2l-Y
  • https://www.youtube.com/watch?v=StTqXEQ2l-Y
  • https://www.youtube.com/embed/-sdTq0ZxZZg
  • URL parameters authorized: :start
• Vimeo
  • https://vimeo.com/152640853
  • https://player.vimeo.com/video/152640853

Can be http or https protocol

You can add your own video service:

my_awesome_service.rb:

module MarkdownVideos::Services

  class MyAwsomeService < ServiceBase

    def self.regexp
      /^(https?:\/\/myaweso.me\/video\/([\w\-]{4,16})\??([\w\-\=]+)?)$/
    end

    def width
      560
    end

    def height
      315
    end

    def url
      "https://player.myaweso.me/video/#{resource_id}"
    end

    def url_parameters
      [:start]
    end

  end

end

Or even any random service that can be embeded:

twitter_service.rb:

module MarkdownVideos::Services

  class TwitterService < ServiceBase

    # Matching https://twitter.com/DevpostHacks/status/628627980445712384
    #
    def self.regexp
      /^(https?:\/\/twitter\.com\/([\w]+)\/status\/([0-9]+))$/
    end

    def url
      "https://twitter.com/#{markdown_url_data[2]}/status/#{markdown_url_data[3]}"
    end

    def to_html
      "<blockquote class=\"twitter-tweet\" data-lang=\"en\"><a href=\"#{url}\"></a></blockquote><script async src=\"http://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>"
    end

  end

end

Look at the lib/markdown_videos/services/service_base.rb for more details.

• Add more services

• Fork the project
• Clone the project locally git clone ...
• Add upstream repo git remote add upstream https://github.com/capripot/markdown_videos.git
• Create a new branch from master git checkout -b my_contribution
• Code
• git rebase master on your branch
• Make sure bundle exec rubocop and bundle exec rspec are passing
• Create a Pull Request against upstream/master on GitHub

Do above process and also, more specifically:

• Add the service in lib/markdown_videos/services.rb
• Add tests to lib/service_tests.rb
• Name your branch add_service_name_service replacing service_name
• Add the service to this README.md file

Licensed under LGPL v3.0

Copyright (c) 2016 Ronan Potage and contributors