Embeddable
Embeddable makes it easier to embed videos.
Installation
Add this line to your application's Gemfile:
gem 'embeddable'
And then execute:
$ bundle
Or install it yourself as:
$ gem install embeddable
Usage
# app/models/post.rb
class Post < ActiveRecord::Base
include Embeddable
embeddable :video, from: :video_url
end
# ...
post = Post.new video_url: 'http://www.youtube.com/watch?v=bEvNRmPzq9s'
post.video_on_youtube? # => true
post.video_id # => 'bEvNRmPzq9s'
Views
You can use a simple view helper to render the respective video players. embed_video(embeddable, width, height)
<div class="video-wrapper">
<%= embed_video(embeddable, '100%', '100%') %>
</div>
Multiple embeddables in one model
If you have multiple columns using embeddable in one model, you will need to specify which one you want to embed unless it's the first one specified in the model. Add an extra parameter to the view helper: embed_video(embeddable, width, height, name: :your_embeddable_name)
.
If you have this in your model:
embeddable :video, from: :video_url
embeddable :another_video, from: :another_url
And you want to embed :another_video
- you will use the helper like this:
<%= embed_video(embeddable, '100%', '100%', name: :another_video) %>
Overriding
The view helper uses partials to render the embed snippets for all of the video players. You can override them by creating a partial here: app/views/embeddable/
. The file should be named after the player. See example below.
<!-- app/views/embeddable/partials/_youtube.html.erb -->
<iframe width="<%= width %>" height="<%= height %>" src="//www.youtube.com/embed/<%= id %>" frameborder="0" allowfullscreen webkitallowfullscreen mozillowfullscreen></iframe>
Brightcove
If you want to support brightcove, you'll need to add your own brightcove player by overriding the brightcove partial.
- Create a partial in your project here:
app/views/embeddable/partials/_brightcove.html.erb
- Add your brightcove player code(see example below)
- Remember to add the following parameters(included in the example below):
id
,width
,height
<div class="BCLcontainingBlock">
<div class="BCLvideoWrapper">
<div style="display:none"></div>
<script type="text/javascript" src="https://sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="brightcove-<%= id %>" class="BrightcoveExperience">
<param name="secureConnections" value="true" />
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="<%= width %>" />
<param name="height" value="<%= height %>" />
<param name="playerID" value="Your player id" />
<param name="playerKey" value="Your player key" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="wmode" value="transparent" />
<param name="@videoPlayer" value="<%= id %>" />
<param name="includeAPI" value="true" />
<param name="templateReadyHandler" value="onTemplateReady" />
</object>
<script type="text/javascript">brightcove.createExperiences();</script>
</div>
</div>
If you used this example, you must remember to add your own playerId
and playerKey
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request
Credits
Hyper made this. We're a digital communications agency with a passion for good code, and if you're using this library we probably want to hire you.
License
Embeddable is available under the MIT license. See the LICENSE file for more info.