tableflip/react-responsive-embed

Name: react-responsive-embed

Owner: TABLEFLIP

Description: :atom_symbol: Embed iframes responsively

Created: 2017-01-24 12:24:57.0

Updated: 2018-04-26 15:27:43.0

Pushed: 2018-04-15 17:55:31.0

Homepage: https://tableflip.github.io/react-responsive-embed

Size: 66

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

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

install --save react-responsive-embed

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

ponsiveEmbed src='https://www.youtube.com/embed/2yqz9zgoC-U' allowFullScreen />

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:

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

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

ponsiveEmbed src='https://www.youtube.com/embed/2yqz9zgoC-U' ratio='4:3' />

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.