├── .babelrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── docs
├── components
│ ├── Head.js
│ └── Page.js
└── index.html
├── lib
└── .gitkeep
├── package-lock.json
├── package.json
├── src
└── index.js
└── test
└── index.test.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env"]
3 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib/index.js
2 | node_modules
3 | *.log
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | docs
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Oli Evans
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React ResponsiveEmbed
2 |
3 | You want to embed a YouTube or other `iframe` style embedded content, and you'd
4 | like it to take up the available width, and retain it's aspect ratio.
5 |
6 | Much like the [Bootstrap responsive embed helpers] of old, but for react.
7 |
8 | ## Usage
9 |
10 | ```sh
11 | npm install --save react-responsive-embed
12 | ```
13 |
14 | Then in your app import `ResponsiveEmbed` and in JSX flavour you might do:
15 |
16 | ```html
17 |
18 | ```
19 |
20 | Which'd give you an `iframe` element pointing at the `src` and any other props.
21 | It's wrapped in a `div` with just the right amount of `padding-bottom` to
22 | preserve a **16:9** aspect ratio like so:
23 |
24 | ```html
25 |