diff --git a/README.md b/README.md
index 19c6cb5774..417f6df42e 100644
--- a/README.md
+++ b/README.md
@@ -23,8 +23,8 @@
Thanks to the awesome folks over at [Fastly][fastly], there's a free, CDN hosted version of Video.js that anyone can use. Add these tags to your document's ``:
```html
-` element, but with an additional `data-setup` attribute. At a minimum, this attribute must have a value of `'{}'`, but it can include any Video.js [options][options] - just make sure it contains valid JSON!
diff --git a/package.json b/package.json
index 2179261593..592a3e4b17 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "video.js",
- "description": "An HTML5 and Flash video player with a common API and skin for both.",
+ "description": "An HTML5 video player that supports HLS and DASH with a common API and skin.",
"version": "7.8.1",
"main": "./dist/video.cjs.js",
"module": "./dist/video.es.js",
@@ -9,6 +9,7 @@
"license": "Apache-2.0",
"keywords": [
"flash",
+ "hls",
"html5",
"player",
"video",
diff --git a/src/css/components/_layout.scss b/src/css/components/_layout.scss
index 0d92b9026c..34409f67bd 100644
--- a/src/css/components/_layout.scss
+++ b/src/css/components/_layout.scss
@@ -113,12 +113,13 @@ body.vjs-full-window {
bottom: 0;
right: 0;
}
-.video-js.vjs-fullscreen {
+.video-js.vjs-fullscreen:not(.vjs-ios-native-fs) {
width: 100% !important;
height: 100% !important;
// Undo any aspect ratio padding for fluid layouts
padding-top: 0 !important;
}
+
.video-js.vjs-fullscreen.vjs-user-inactive {
cursor: none;
}
diff --git a/src/js/component.js b/src/js/component.js
index 35ac4acbe3..d88fa496a4 100644
--- a/src/js/component.js
+++ b/src/js/component.js
@@ -526,8 +526,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/src/js/player.js b/src/js/player.js
index e811643b41..9b63916134 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -2077,6 +2077,9 @@ class Player extends Component {
*/
handleTechFullscreenChange_(event, data) {
if (data) {
+ if (data.nativeIOSFullscreen) {
+ this.toggleClass('vjs-ios-native-fs');
+ }
this.isFullscreen(data.isFullscreen);
}
}
diff --git a/src/js/tech/html5.js b/src/js/tech/html5.js
index 4a6b7ac8fc..cffcf17427 100644
--- a/src/js/tech/html5.js
+++ b/src/js/tech/html5.js
@@ -626,7 +626,11 @@ class Html5 extends Tech {
this.el_.webkitPresentationMode !== 'picture-in-picture') {
this.one('webkitendfullscreen', endFn);
- this.trigger('fullscreenchange', { isFullscreen: true });
+ this.trigger('fullscreenchange', {
+ isFullscreen: true,
+ // set a flag in case another tech triggers fullscreenchange
+ nativeIOSFullscreen: true
+ });
}
};
diff --git a/test/unit/component.test.js b/test/unit/component.test.js
index fcd4d1d59e..7cb17d8843 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());