Skip to content

Commit

Permalink
#38 Append custom classname to video element
Browse files Browse the repository at this point in the history
  • Loading branch information
@mderrick
mderrick committed Jul 17, 2016
1 parent 9380e35 commit d573310
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 1 deletion.
9 changes: 8 additions & 1 deletion demo/src/components/index/main/Main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,14 @@ var Main = React.createClass({
<span className="main__react-logo"></span> React HTML5 Video
</h1>
<div className="main__video">
<Video controls autoPlay loop muted ref="video" onProgress={this.onProgress}>
<Video
className="custom-class"
controls
autoPlay
loop
muted
ref="video"
onProgress={this.onProgress}>
<source src={videos[this.state.videoId]} type="video/mp4" />
<Overlay />
<Controls />
Expand Down
5 changes: 5 additions & 0 deletions src/components/video/Video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ var Video = React.createClass({
// Non-standard props
copyKeys: React.PropTypes.object,
children: React.PropTypes.node,
className: React.PropTypes.string,

// HTML5 Video standard attributes
autoPlay: React.PropTypes.bool,
Expand Down Expand Up @@ -291,6 +292,7 @@ var Video = React.createClass({
* @return {string} Class string
*/
getVideoClassName() {
var {className} = this.props;
var classString = 'video';

if (this.state.error) {
Expand All @@ -306,6 +308,9 @@ var Video = React.createClass({
if (this.state.focused) {
classString += ' video--focused';
}
if (className) {
classString += ' ' + className;
}
return classString;
},

Expand Down

3 comments on commit d573310

@nneverlander
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this adds the className to the enclosing div instead of the video element itself. Also this works onlhy if the className is "custom-class". If I give my own className like "custom-video", it won't work.

@nneverlander
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if I want to set width and height of a video via a css class (instead of attributes width and height of the Video component), I can't.

@mderrick
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't just append 'custom-class', that is the demo, it can apply any class you provide via props. Why do you need a custom class on the video itself when you can target it .custom-class .video__el { width: 100px; height: 100px }.

Please sign in to comment.