Awesome
<responsive-embed>
A Polymer element for responsive embeds
Maintained by Joselito Júnior.
Demo
Installation
Install using Bower:
$ bower i responsive-embed -S
or via npm:
$ npm i responsive-embed
Usage
-
Import Web Components' polyfill (webcomponents.js)
<script src=".../webcomponentsjs/webcomponents.js"></script>
-
Import Custom Element:
<link rel="import" href=".../responsive-embed.html">
-
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>