https://github.com/tableflip/react-responsive-embed

:atom_symbol: Embed iframes responsively
https://github.com/tableflip/react-responsive-embed

aspect-ratio embed iframe react

Last synced: 28 days ago
JSON representation

:atom_symbol: Embed iframes responsively

• Host: GitHub
• URL: https://github.com/tableflip/react-responsive-embed
• Owner: tableflip
• License: mit
• Created: 2017-01-24T12:24:57.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-17T20:57:28.000Z (about 1 year ago)
• Last Synced: 2024-05-30T04:28:07.281Z (about 1 month ago)
• Topics: aspect-ratio, embed, iframe, react
• Language: JavaScript
• Homepage: https://tableflip.github.io/react-responsive-embed
• Size: 384 KB
• Stars: 40
• Watchers: 2
• Forks: 9
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-stars - react-responsive-embed

README

        
# React ResponsiveEmbed

You want to embed a YouTube or other `iframe` style embedded content, and you'd

like it to take up the available width, and retain it's aspect ratio.

Much like the [Bootstrap responsive embed helpers] of old, but for react.

## Usage

```sh

npm install --save react-responsive-embed

```

Then in your app import `ResponsiveEmbed` and in JSX flavour you might do:

```html

```

Which'd give you an `iframe` element pointing at the `src` and any other props.

It's wrapped in a `div` with just the right amount of `padding-bottom` to

preserve a **16:9** aspect ratio like so:

```html



  



```


Pass in a `ratio` prop to pick a different one. Any ratio will do:

```html

```

`frameborder="0"` is applied by default.

## Browserify / Webpack / Other?

**This module is just a function**. It's been babelified so it'll work with 

whatever your set up is. Use browserify or webpack or any other npm module

consuming bundle whizzbang; ResponsiveEmbed don't mind.

---

A [(╯°□°）╯︵TABLEFLIP] side project.

[Bootstrap responsive embed helpers]: https://v4-alpha.getbootstrap.com/utilities/responsive-helpers/#responsive-embeds

[(╯°□°）╯︵TABLEFLIP]: https://tableflip.io