# css-video-wrap

> a css module wrapper for embedded video youtube, vimeo, etc...

Latest version **1.0.2** (published 2015-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install css-video-wrap
pnpm add css-video-wrap
yarn add css-video-wrap
bun add css-video-wrap
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2015-12-15 |
| First published | 2015-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Steven Iseki |
| Maintainers | steveniseki |
| Keywords | css, css-module, css module, css video wrapper, css-video-wrapper, css video wrapper css module, react, reactjs |

## Links

- npm: https://www.npmjs.com/package/css-video-wrap
- Repository: https://github.com/StevenIseki/css-video-wrap
- Homepage: https://github.com/StevenIseki/css-video-wrap#readme
- Issues: https://github.com/StevenIseki/css-video-wrap/issues
- npm.io page: https://npm.io/package/css-video-wrap

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2015-12-15
- 1.0.1 — 2015-11-24
- 1.0.0 — 2015-11-24

## README

# css-video-wrap

[![npm version](https://badge.fury.io/js/css-video-wrap.svg)](https://badge.fury.io/js/css-video-wrap)

A [css module](https://github.com/css-modules/css-modules) compatible css module wrapper for embedded video youtube, vimeo, etc...

Best to use this with [react-css-modules](https://github.com/gajus/react-css-modules)

## Install

`npm install css-video-wrap --save-dev`

## Usage

Simply import the video wrap css module and use it to wrap around an embed

`import { wrapper } from 'css-video-wrap'`

Then use it for styling your elements.

```jsx
	return (
        <div styleName="videoWrapper">
        	{/* video embed... */}
        </div>
    );
```

## Example

Check out the full working example [here](https://github.com/StevenIseki/css-video-wrap/tree/master/example)

**Run it**

`npm install; npm start`

```jsx
import React from 'react';
import CSSModules from 'react-css-modules';

let styles = {}
import { wrapper } from 'css-video-wrap'

Object.assign(styles, wrapper)

function Video( props) {

    const { route } = props;

    return (
        <div styleName="videoWrapper">
        	<iframe width="560" height="315" src="https://www.youtube.com/embed/HBHJ0XGZfLs" frameBorder="0" allowFullScreen></iframe>
        </div>
    );
}

export default CSSModules(Video, styles, {allowMultiple: true} )
```

## License

[MIT](http://isekivacenz.mit-license.org/)

---
_Source: https://npm.io/package/css-video-wrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._