ableplayer · joedolson · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025
diff --git a/build/ableplayer.dist.js b/build/ableplayer.dist.js
@@ -1,4 +1,4 @@
-/*! ableplayer V4.7.0-beta1 with DOMPurify included */
+/*! ableplayer V4.7.0 with DOMPurify included */
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
 
 (function (global, factory) {
@@ -6450,8 +6450,12 @@ if (typeof module !== "undefined" && module.exports) {
 			modal.attr({
 				'aria-labelledby': 'modalTitle-' + this.baseId,
 			});
-			modal.prepend(titleH1);
-			modal.prepend(closeButton);
+			var modalHeader = $( '<div>', {
+				'class': 'able-modal-header'
+			});
+			modalHeader.prepend(titleH1);
+			modalHeader.prepend(closeButton);
+			modal.prepend(modalHeader);
 		}
 
 		modal.attr({

diff --git a/build/ableplayer.js b/build/ableplayer.js
@@ -1,4 +1,4 @@
-/*! ableplayer V4.7.0-beta1 with DOMPurify included */
+/*! ableplayer V4.7.0 with DOMPurify included */
 /*! @license DOMPurify 3.2.6 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.6/LICENSE */
 
 (function (global, factory) {
@@ -7834,8 +7834,12 @@ if (typeof module !== "undefined" && module.exports) {
 			modal.attr({
 				'aria-labelledby': 'modalTitle-' + this.baseId,
 			});
-			modal.prepend(titleH1);
-			modal.prepend(closeButton);
+			var modalHeader = $( '<div>', {
+				'class': 'able-modal-header'
+			});
+			modalHeader.prepend(titleH1);
+			modalHeader.prepend(closeButton);
+			modal.prepend(modalHeader);
 		}
 
 		modal.attr({

diff --git a/build/ableplayer.min.css b/build/ableplayer.min.css
diff --git a/build/ableplayer.min.js b/build/ableplayer.min.js
diff --git a/build/separate-dompurify/ableplayer.dist.js b/build/separate-dompurify/ableplayer.dist.js
@@ -1,4 +1,4 @@
-/*! ableplayer V4.7.0-beta1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN */
+/*! ableplayer V4.7.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN */
 /*
 	// JavaScript for Able Player
 
@@ -6479,8 +6479,12 @@ if (typeof module !== "undefined" && module.exports) {
 			modal.attr({
 				'aria-labelledby': 'modalTitle-' + this.baseId,
 			});
-			modal.prepend(titleH1);
-			modal.prepend(closeButton);
+			var modalHeader = $( '<div>', {
+				'class': 'able-modal-header'
+			});
+			modalHeader.prepend(titleH1);
+			modalHeader.prepend(closeButton);
+			modal.prepend(modalHeader);
 		}
 
 		modal.attr({

diff --git a/build/separate-dompurify/ableplayer.js b/build/separate-dompurify/ableplayer.js
@@ -1,4 +1,4 @@
-/*! ableplayer V4.7.0-beta1 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN */
+/*! ableplayer V4.7.0 - In this file, DOMPurify is not bundled in with AblePlayer, but is a required dependency that can be added to the project via a local copy or a CDN */
 /*
 	// JavaScript for Able Player
 
@@ -6479,8 +6479,12 @@ if (typeof module !== "undefined" && module.exports) {
 			modal.attr({
 				'aria-labelledby': 'modalTitle-' + this.baseId,
 			});
-			modal.prepend(titleH1);
-			modal.prepend(closeButton);
+			var modalHeader = $( '<div>', {
+				'class': 'able-modal-header'
+			});
+			modalHeader.prepend(titleH1);
+			modalHeader.prepend(closeButton);
+			modal.prepend(modalHeader);
 		}
 
 		modal.attr({

diff --git a/build/separate-dompurify/ableplayer.min.js b/build/separate-dompurify/ableplayer.min.js
diff --git a/changelog.md b/changelog.md
@@ -1,12 +1,12 @@
 # AblePlayer Changelog
 
-## 4.7.0
+## 4.7.0 September 28th, 2025
 
 ### Styling
 
 - New default theme with modernized layout and variables for colors.
   - This summarizes a large number of individually small changes to the layout and styling of Able Player elements.
-- Removed many instances of positioning imposed from JS so that more positioning is controllable from CSS.
+- Removed somes instances of positioning imposed from JS so positioning is more controllable from CSS.
 - Significant improvements to responsive design and behaviors.
 - Removed fixed width and height set on big play button.
 - Make big play button partially transparent.
@@ -50,7 +50,7 @@
 
 ### Internationalization
 
-- Change all translation files from JS containing a JSON object to `.json`.
+- Change all translation files from JS containing a JSON object to `.json`. Fallback to .js files if JSON sources not found.
 - Add `ms` and `pl` to list of supported languages.
 - Add several new strings to translation files. (Translations needed.)
 
@@ -74,7 +74,7 @@
 - Remove unused prototype `AblePlayer.prototype.isCloseToCorner`.
 - Remove unused `mediaType` argument from AccessibleSlider prototype.
 
-## 4.6.0
+## 4.6.0 June 23rd, 2025
 
 ### Styling
 - Change default skin to "2020".

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ableplayer",
-  "version": "4.7.0-beta1",
+  "version": "4.7.0",
   "description": "Accessible HTML5 media player",
   "homepage": "https://ableplayer.github.io/ableplayer",
   "bugs": "https://github.com/ableplayer/ableplayer/issues",

diff --git a/scripts/dialog.js b/scripts/dialog.js
@@ -41,8 +41,12 @@
 			modal.attr({
 				'aria-labelledby': 'modalTitle-' + this.baseId,
 			});
-			modal.prepend(titleH1);
-			modal.prepend(closeButton);
+			var modalHeader = $( '<div>', {
+				'class': 'able-modal-header'
+			});
+			modalHeader.prepend(titleH1);
+			modalHeader.prepend(closeButton);
+			modal.prepend(modalHeader);
 		}
 
 		modal.attr({

diff --git a/styles/ableplayer.css b/styles/ableplayer.css
@@ -592,17 +592,21 @@ div.able-modal-overlay {
 	margin-top: 1rem;
 }
 
+.able-modal-header {
+	display: flex;
+	justify-content: space-between;
+}
+
 .able-modal-dialog .modalCloseButton {
-	position: absolute;
-	top: 5px;
-	right: 5px;
 	margin: 0;
+	align-self: flex-start;
 }
 
 div.able-modal-dialog h1 {
 	font-size: 1.5rem;
 	line-height: 1.6;
 	margin: 0 0 .5rem;
+	order: -1;
 }
 
 /* Preferences Form */