/integral-video-embed

Helps embed videos from known providers (like YouTube) into HTML

Primary LanguageRubyMIT LicenseMIT

Integral Video Embed

Gem Version

Table of Contents

Features

Helps embed videos from known providers like YouTube into HTML

Requirements

  1. Ruby 2.5.0+

Setup

To install, run:

gem install integral-video-embed

Add the following to your Gemfile:

gem "integral-video-embed"

Usage

  1. Probably, within a Rails helper:

    def bootstrap_embed(uid)
      Integral::Video::Embed::Bootstrap.html(uid, provider: "YouTube", proportions: "16by9").html_safe
    end
    
    def embed_vk(uid, hash:)
      Integral::Video::Embed::Generic.html(uid, provider: "Вконтакте").html_safe
    end
  2. and within a Rails view:

    <%= embed_youtube(@video.uid) %>
    <%= embed_vk(@video.uid, @video.uhash) %>

Labnol embed

This is a very cool technique by Amit Agarwal that allows not to download the YouTube player with its whole bunch of resources for each embedded video — untill the user clicks on it — but instead show a lightweight proxy of a YouTube player (a poster and a button) that looks almost the same as the player.

To use Labnol embed you have to bring CSS / JS dependency. I improved the original code a little and put it right into the gem folder.

  1. Copy & paste vendor/assets/plugins/youtube-labnol-extended-1.1 folder into you Rails /vendor/assets/plugins folder.

  2. To include plugins folder add it to assets.rb:

    Rails.application.config.assets.paths << Rails.root.join('vendor', 'assets', 'plugins')
  3. Make button image (button.svg) publicly accessible with help of app/assets/config/manifest.js

    // link ../../../vendor/assets/plugins/youtube-labnol-extended-1.1/button.svg

And then as usual:

  1. within a Rails helper:

    def embed_labnol(uid)
      Integral::Video::Embed::Labnol.html(uid, provider: "Вконтакте").html_safe
    end
  2. and within a Rails view:

    <%= embed_labnol(@video.uid) %>

Tests

To test, run:

bundle exec rake

Versioning

Read Semantic Versioning for details. Briefly, it means:

  • Major (X.y.z) - Incremented for any backwards incompatible public API changes.
  • Minor (x.Y.z) - Incremented for new, backwards compatible, public API enhancements/fixes.
  • Patch (x.y.Z) - Incremented for small, backwards compatible, bug fixes.

Code of Conduct

Please note that this project is released with a CODE OF CONDUCT. By participating in this project you agree to abide by its terms.

Contributions

Read CONTRIBUTING for details.

License

Copyright 2019 Integral Design. Read LICENSE for details.

History

Read CHANGES for details. Built with Gemsmith.

Credits

Developed by Sergey Pedan at Integral Design.