Skip to content

README.md

Latest commit

 

History

History
60 lines (42 loc) · 1.8 KB

README.md

File metadata and controls

60 lines (42 loc) · 1.8 KB

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

npm install --save react-responsive-embed

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

<ResponsiveEmbed>
  <iframe src='https://www.youtube.com/embed/2yqz9zgoC-U' frameborder="0" allowfullscreen />
</ResponsiveEmbed>

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:

<div style="position:relative;height:0;overflow:hidden;max-width:100%;padding-bottom:56.25%;">
  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;",
    src="https://www.youtube.com/embed/2yqz9zgoC-U"
    frameborder="0"
    allowfullscreen></iframe>
</div>

Pass a ratio property to pick a different one. Any ratio will do:

<ResponsiveEmbed ratio='4:3'>
  <iframe src='https://www.youtube.com/embed/2yqz9zgoC-U' allowfullscreen />
</ResponsiveEmbed>

frameborder="0" is applied to the child element for you.

You can pass any child element to ResponsiveEmbed. It doesn't have to be an iframe.

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.