React ResponsiveEmbedYou want to embed a YouTube or other
iframestyle 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.
npm install --save react-responsive-embed
Then in your app import
ResponsiveEmbedand in JSX flavour you might do:
<ResponsiveEmbed src='https://www.youtube.com/embed/2yqz9zgoC-U' allowfullscreen />
Which'd give you an
iframeelement pointing at the
srcand any other props. It's wrapped in a
divwith just the right amount of
padding-bottomto preserve a 16:9 aspect ratio like so:
<div style="position:relative;height:0;overflow:hidden;max-width:100%;padding-bottom:56.25%;"> <iframe src="https://www.youtube.com/embed/2yqz9zgoC-U" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allowfullscreen></iframe> </div>
Pass in a
ratioprop to pick a different one. Any ratio will do:
<ResponsiveEmbed 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.