📺 A Polymer element for responsive embeds
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
test
.gitignore
README.md
bower.json
index.html
package.json
responsive-embed.html

README.md

<responsive-embed>

A Polymer element for responsive embeds

Maintained by Joselito Júnior.

Demo

Check it live.

Installation

Install using Bower:

$ bower i responsive-embed -S

or via npm:

$ npm i responsive-embed

Usage

  1. Import Web Components' polyfill (webcomponents.js)

    <script src=".../webcomponentsjs/webcomponents.js"></script>
  2. Import Custom Element:

    <link rel="import" href=".../responsive-embed.html">
  3. Start using it!

    <responsive-embed>
        <!-- your media content -->
    </responsive-embed>

Options

Attribute Options Default Description
ratio 1:1, 4:3,16:9, 21:9 16:9 Aspect ratio of the internal content

Example:

<responsive-embed ratio="16:9">
  <iframe src="https://www.youtube.com/embed/fCLMI5TCcqg" frameborder="0" allowfullscreen></iframe>
</responsive-embed>

License

Apache 2.0