├── .gitignore ├── bower.json ├── package.json ├── test ├── index.html └── basic-test.html ├── index.html ├── README.md ├── demo └── index.html └── responsive-embed.html /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive-embed", 3 | "version": "1.0.0", 4 | "homepage": "https://github.com/joselitojunior1/responsive-embed/", 5 | "authors": [ 6 | "Joselito Júnior " 7 | ], 8 | "description": "An element for responsive embeds.", 9 | "keywords": [ 10 | "web-component", 11 | "web-components", 12 | "polymer", 13 | "responsive", 14 | "embed", 15 | "media" 16 | ], 17 | "main": "responsive-embed.html", 18 | "license": "http://www.apache.org/licenses/LICENSE-2.0", 19 | "ignore": [ 20 | "/.*", 21 | "node_modules", 22 | "bower_components", 23 | "/test/", 24 | "/demo/", 25 | "**/.*", 26 | "test", 27 | "tests" 28 | ], 29 | "dependencies": { 30 | "polymer": "Polymer/polymer#^1.0.0" 31 | }, 32 | "devDependencies": { 33 | "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", 34 | "web-component-tester": "*" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive-embed", 3 | "version": "1.0.0", 4 | "description": "A Polymer element for responsive embeds", 5 | "main": "index.html", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "start": "polyserve", 11 | "test": "wct -l chrome" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/joselitojunior1/responsive-embed.git" 16 | }, 17 | "keywords": [ 18 | "web", 19 | "component", 20 | "shadow", 21 | "dom", 22 | "template", 23 | "polymer", 24 | "responsive", 25 | "media", 26 | "web-component", 27 | "web-components" 28 | ], 29 | "author": "Joselito Junior (http://joselito.ninja)", 30 | "license": "Apache-2.0", 31 | "bugs": { 32 | "url": "https://github.com/joselitojunior1/responsive-embed/issues" 33 | }, 34 | "homepage": "https://github.com/joselitojunior1/responsive-embed", 35 | "devDependencies": { 36 | "polyserve": "^0.5.0", 37 | "bower": "^1.7.7", 38 | "web-component-tester": "^4.2.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /test/basic-test.html: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # <responsive-embed> 2 | 3 | A [Polymer](http://polymer-project.org) element for responsive embeds 4 | 5 | > Maintained by [Joselito Júnior](https://github.com/joselitojunior1). 6 | 7 | ## Demo 8 | 9 | > [Check it live](https://joselito.ninja/responsive-embed/). 10 | 11 | ## Installation 12 | 13 | Install using [Bower](http://bower.io): 14 | 15 | ```shell 16 | $ bower i responsive-embed -S 17 | ``` 18 | 19 | or via [npm](http://npmjs.com): 20 | ```shell 21 | $ npm i responsive-embed 22 | ``` 23 | 24 | ## Usage 25 | 26 | 1. Import Web Components' polyfill (webcomponents.js) 27 | 28 | ```html 29 | 30 | ``` 31 | 32 | 2. Import Custom Element: 33 | 34 | ```html 35 | 36 | ``` 37 | 38 | 3. Start using it! 39 | 40 | ```html 41 | 42 | 43 | 44 | ``` 45 | 46 | ## Options 47 | 48 | Attribute | Options | Default | Description 49 | --- | --- | --- | --- 50 | `ratio` | `1:1`, `4:3`,`16:9`, `21:9` | `16:9` | Aspect ratio of the internal content 51 | 52 | ## Example: 53 | 54 | ```html 55 | 56 | 57 | 58 | ``` 59 | 60 | ## License 61 | 62 | [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0) 63 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | responsive-embed @ joselitojunior1 8 | 9 | 10 | 21 | 22 | 23 | 24 | 25 |
26 |

An example of 27 | <responsive-embed>:

28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 46 |
47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /responsive-embed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 17 | 18 | 19 | 60 | 61 | 66 | 67 | 68 | 69 | 136 | --------------------------------------------------------------------------------