flex-video

v0.9.6arrow_drop_down
v0.9.6
STATUS
Passing
DOWNLOADS
364
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 months ago
subject
Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.
Like
Use flex-video in your project ?
Copied
npm i @bit/digiaonline.react-foundation.flex-video
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Files
components/flex-video.js
33 Lines(22 sloc)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import React from 'react';
import PropTypes from 'prop-types';
import { GeneralPropTypes, FlexboxPropTypes, createClassName, generalClassNames, removeProps, objectKeys } from '../utils';

/**
 * FlexVideo component.
 * http://foundation.zurb.com/sites/docs/flex-video.html
 *
 * @param {Object} props
 * @returns {Object}
 */
export const FlexVideo = (props) => {
  const className = createClassName(
    props.noDefaultClassName ? null : 'flex-video',
    props.className,
    {
      widescreen: props.isWidescreen,
      vimeo: props.isVimeo
    },
    generalClassNames(props)
  );

  const passProps = removeProps(props, objectKeys(FlexVideo.propTypes));

  return <div {...passProps} className={className}/>;
};

FlexVideo.propTypes = {
  ...GeneralPropTypes,
  ...FlexboxPropTypes,
  isWidescreen: PropTypes.bool,
  isVimeo: PropTypes.bool
};