Find video by id instead of by tagname

src/video/video.js

@@ -31,7 +31,8 @@ export default (
     BaseComponent,
     mapStateToProps = defaultMapStateToProps,
     mapVideoElToProps = defaultMapVideoElToProps,
-    mergeProps = defaultMergeProps
+    mergeProps = defaultMergeProps,
+    videoId
 ) => class Video extends Component {
         constructor(props) {
             super(props);
@@ -102,7 +103,10 @@ export default (
         }
 
         componentDidMount() {
-            this.videoEl = this.el.getElementsByTagName('video')[0];
+            const videoEls = this.el.getElementsByTagName('video');
+            this.videoEl = videoId
+              ? videoEls.namedItem(videoId)
+              : videoEls[0];
             this.bindEventsToUpdateState();
         }
 

src/video/video.test.js

@@ -20,6 +20,12 @@ const TestVideo = ({ video, ...restProps }) => {
             <video {...restProps}>
                 <source src="1" />
             </video>
+            <video
+              id="video2"
+              {...restProps}
+            >
+                <source src="2" />
+            </video>
             <TestControl {...video} />
         </div>
     );
@@ -228,7 +234,20 @@ describe('video', () => {
             expect(component.find(TestVideo).prop('duplicateKey')).toBe('mapVideoElToProps');
         });
     });
-});
-
-
 
+    describe('when passing in a video id as the fourth argument to the HOC', () => {
+      const videoEl = { id: 'video2' };
+      beforeEach(() => {
+        component = shallow(
+          <Component />
+        );
+
+        // Emulate videoEl being present
+        // e.g. componentDidMount
+        component.instance().videoEl = videoEl;
+      });
+      it('should find the video by id', () => {
+        expect(videoEl.id).toEqual('video2');
+      });
+    });
+});