diff --git a/src/js/component.js b/src/js/component.js
index 0593e0696..09ac9053c 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -495,8 +495,13 @@ class Component {
       // If inserting before a component, insert before that component's element
       let refNode = null;
 
-      if (this.children_[index + 1] && this.children_[index + 1].el_) {
-        refNode = this.children_[index + 1].el_;
+      if (this.children_[index + 1]) {
+        // Most children are components, but the video tech is an HTML element
+        if (this.children_[index + 1].el_) {
+          refNode = this.children_[index + 1].el_;
+        } else if (Dom.isEl(this.children_[index + 1])) {
+          refNode = this.children_[index + 1];
+        }
       }
 
       this.contentEl().insertBefore(component.el(), refNode);
diff --git a/test/unit/component.test.js b/test/unit/component.test.js
index 1b8bc0c4b..dc908a948 100644
--- a/test/unit/component.test.js
+++ b/test/unit/component.test.js
@@ -164,6 +164,26 @@ QUnit.test('should insert element relative to the element of the component to in
   /* eslint-enable no-unused-vars */
 });
 
+QUnit.test('should allow for children that are elements', function(assert) {
+
+  // for legibility of the test itself:
+  /* eslint-disable no-unused-vars */
+
+  const comp = new Component(getFakePlayer());
+  const testEl = Dom.createEl('div');
+
+  // Add element as video el gets added to player
+  comp.el().appendChild(testEl);
+  comp.children_.unshift(testEl);
+
+  const child1 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c1'})});
+  const child2 = comp.addChild('component', {el: Dom.createEl('div', {}, {class: 'c4'})}, 0);
+
+  assert.ok(child2.el_.nextSibling === testEl, 'addChild should insert el before a sibling that is an element');
+
+  /* eslint-enable no-unused-vars */
+});
+
 QUnit.test('addChild should throw if the child does not exist', function(assert) {
   const comp = new Component(getFakePlayer());