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
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
repogit 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
andbundle 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
replacingservice_name
- Add the service to this
README.md
file
Licensed under LGPL v3.0
Copyright (c) 2016 Ronan Potage and contributors