diff --git a/README.md b/README.md
index bc0ba996..ea5f2fc5 100644
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ Prop | Description | Default
`style` | Add [inline styles](https://facebook.github.io/react/tips/inline-styles.html) to the root element | `{}`
`progressInterval` | The time between `onProgress` callbacks, in milliseconds | `1000`
`playsinline` | Applies the `playsinline` attribute where supported | `false`
+`wrapper` | Element or component to use as the container element | `div`
`config` | Override options for the various players, see [config prop](#config-prop)
#### Callback props
@@ -167,7 +168,7 @@ class ResponsivePlayer extends Component {
render () {
return (
-
+
{players}
-
+
)
}
}
diff --git a/src/props.js b/src/props.js
index b1f04942..7af38876 100644
--- a/src/props.js
+++ b/src/props.js
@@ -15,6 +15,7 @@ export const propTypes = {
style: object,
progressInterval: number,
playsinline: bool,
+ wrapper: oneOfType([ string, func ]),
config: shape({
soundcloud: shape({
options: object
@@ -70,6 +71,7 @@ export const defaultProps = {
style: {},
progressInterval: 1000,
playsinline: false,
+ wrapper: 'div',
config: {
soundcloud: {
options: {
diff --git a/test/specs/ReactPlayer.js b/test/specs/ReactPlayer.js
index 903d3f85..83c7ce60 100644
--- a/test/specs/ReactPlayer.js
+++ b/test/specs/ReactPlayer.js
@@ -393,4 +393,32 @@ describe('ReactPlayer', () => {
expect(ReactPlayer.canPlay('file.txt')).to.be.false
expect(ReactPlayer.canPlay([ 'http://example.com', 'file.txt' ])).to.be.false
})
+
+ describe('wrapper prop', () => {
+ it('defaults wrapper to a div', () => {
+ renderPlayer({
+ url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+ })
+ expect(player.wrapper).to.be.a('HTMLDivElement')
+ })
+
+ it('supports custom wrapper elements', () => {
+ renderPlayer({
+ wrapper: 'p',
+ url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+ })
+ expect(player.wrapper).to.be.a('HTMLParagraphElement')
+ })
+
+ it('supports custom wrapper components', () => {
+ const CustomWrapper = ({ children }) => {children}
+ renderPlayer({
+ wrapper: CustomWrapper,
+ url: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
+ })
+ const el = document.getElementById('test-hook')
+ expect(el.dataset.fakeAttribute).to.equal('woah')
+ expect(el.querySelectorAll('video').length).to.equal(1)
+ })
+ })
})