Skip to content
📼VCR: A tiny React component to handle video embeds
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook
scripts
src
stories
.babelrc
.eslintignore
.eslintrc
.flowconfig
.gitignore
.npmignore
.prettierignore
.prettierrc.yml
.travis.yml
LICENSE
README.md
jest.config.js
package-lock.json
package.json

README.md

📼 VCR npm version Build Status Coverage Status

A tiny React component to handle video embeds

  • Tiny, at less than 2KB Gzipped
  • Performant
  • Multiple video rendering support (including Wistia!)

Table of contents

🔧 Installation

npm install --save @helpscout/vcr

🕹 Usage

Here's a quick example of how to (not-so) dangerously render video embeds with VCR:

import React from 'react'
import VCR from '@helpscout/vcr'

// Your markup which many contain fancy video embeds
const html = `
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_abcde12345" style="width:640px;height:360px;"></div>
`

// Pass it into VCR via the html prop
const App = props => (
  return (
    <VCR html={html} />
  )
)

That's it! VCR will take care of parsing and rendering the video embeds as it "dangerously" sets the innerHTML to render out the rest of your HTML.

🙌 Supported Embeds

You can’t perform that action at this time.