react-responsive-embed/lib/index.js

Embed iframes responsively

'use strict';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var React = require('react');
var PropTypes = require('prop-types');
var div = React.createElement.bind(React, 'div');
var iframe = React.createElement.bind(React, 'iframe');

var divStyle = {
  position: 'relative',
  height: 0,
  overflow: 'hidden',
  maxWidth: '100%'
};

var iframeStyle = {
  position: 'absolute',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%'

  /*
   *  Turn `16:9` into `9 / 16` into `56.25%`
   *  Turn `4:3` into `3 / 4` into `75%`
   */
};var ratioToPercent = function ratioToPercent(ratio) {
  var _ratio$split$map = ratio.split(':').map(function (num) {
    return Number(num);
  }),
      _ratio$split$map2 = _slicedToArray(_ratio$split$map, 2),
      w = _ratio$split$map2[0],
      h = _ratio$split$map2[1];

  return h / w * 100 + '%';
};

/*
 *  Usage: <ResponsiveEmbed src='ace youtube video' ratio='4:3' />
 */
var ResponsiveEmbed = function ResponsiveEmbed(props) {
  var paddingBottom = ratioToPercent(props.ratio);
  var style = Object.assign({}, divStyle, { paddingBottom: paddingBottom });
  var iframeProps = Object.assign({ frameBorder: 0 }, props, { style: iframeStyle });
  delete iframeProps.ratio;
  return div({ style: style }, iframe(iframeProps));
};

ResponsiveEmbed.defaultProps = {
  src: 'https://www.youtube.com/embed/dQw4w9WgXcQ',
  ratio: '16:9'
};

ResponsiveEmbed.propTypes = {
  src: PropTypes.string,
  ratio: function ratio(props, propName, componentName) {
    if (!/\d+:\d+/.test(props[propName])) {
      return new Error('Invalid ratio supplied to ResponsiveEmbed. Expected a string like "16:9" or any 2 numbers seperated by a colon');
    }
  }
};

module.exports = ResponsiveEmbed;