@@ -53,6 +53,7 @@ function ablePlayerSetupWindow() {
 	 * you are running outside the browser (for example, SSR).
 	 *
 	 * @param object media jQuery selector or element identifying the media.
+	 * @param object options Optional configuration options for the player.
 	 */
 	function AblePlayer(media) {
 
@@ -82,17 +83,19 @@ function ablePlayerSetupWindow() {
 			this.okToPlay = false;
 		}
 
+		let data = media[0].dataset;
+
 		// loop (Boolean; if present always resolves to true, regardless of value)
-		this.loop = ($(media).attr('loop') !== undefined) ? true : false;
+		this.loop = (data.loop !== undefined) ? true : false;
 
 		// playsinline (Boolean; if present always resolves to true, regardless of value)
 		this.playsInline = ($(media).attr('playsinline') !== undefined) ? '1' : '0';
 
 		// poster (Boolean, indicating whether media element has a poster attribute)
-		this.hasPoster = ( $(media).attr('poster') || $(media).data('poster') ) ? true : false;
+		this.hasPoster = ( $(media).attr('poster') || data.poster ) ? true : false;
 
-		this.audioPoster = $(media).data('poster');
-		this.audioPosterAlt = $(media).data('poster-alt' );
+		this.audioPoster = data.poster;
+		this.audioPosterAlt = data.posterAlt;
 
 		// get height and width attributes, if present
 		// and add them to variables
@@ -101,18 +104,18 @@ function ablePlayerSetupWindow() {
 		this.height = $(media).attr('height') ?? 0;
 
 		// start-time
-		var startTime = $(media).data('start-time');
+		var startTime = data.startTime;
 		var isNumeric = ( typeof startTime === 'number' || ( typeof startTime === 'string' && startTime.trim() !== '' && ! isNaN(startTime) && isFinite( Number(startTime) ) ) ) ? true : false;
 		this.startTime =  ( startTime !== undefined && isNumeric ) ? startTime : 0;
 
 		// debug
-		this.debug = ($(media).data('debug') !== undefined && $(media).data('debug') !== false) ? true : false;
+		this.debug = (data.debug !== undefined && data.debug !== false) ? true : false;
 
 		// Volume
 		// Range is 0 to 10. Best not to crank it to avoid overpowering screen readers
 		this.defaultVolume = 7;
-		if ($(media).data('volume') !== undefined && $(media).data('volume') !== "") {
-			var volume = $(media).data('volume');
+		if (data.volume !== undefined && data.volume !== "") {
+			var volume = data.volume;
 			if (volume >= 0 && volume <= 10) {
 				this.defaultVolume = volume;
 			}
@@ -124,7 +127,7 @@ function ablePlayerSetupWindow() {
 		// However, in some applications it might be undesirable to show buttons
 		// (e.g., if chapters or transcripts are provided in an external container)
 
-		if ($(media).data('use-chapters-button') !== undefined && $(media).data('use-chapters-button') === false) {
+		if (data.useChaptersButton !== undefined && data.useChaptersButton === false) {
 			this.useChaptersButton = false;
 		} else {
 			this.useChaptersButton = true;
@@ -136,9 +139,9 @@ function ablePlayerSetupWindow() {
 		// set to "true" to write description text to a div
 		// This variable does *not* control the method by which description is read.
 		// For that, see below (this.descMethod)
-		if ($(media).data('descriptions-audible') !== undefined && $(media).data('descriptions-audible') === false) {
+		if (data.descriptionsAudible !== undefined && data.descriptionsAudible === false) {
 			this.readDescriptionsAloud = false;
-		} else if ($(media).data('description-audible') !== undefined && $(media).data('description-audible') === false) {
+		} else if (data.descriptionAudible !== undefined && data.descriptionAudible === false) {
 			// support both singular and plural spelling of attribute
 			this.readDescriptionsAloud = false;
 		} else {
@@ -155,29 +158,29 @@ function ablePlayerSetupWindow() {
 		// 'screenreader' - text-based audio description is always handled by screen readers
 		// The latter may be preferable by owners of websites in languages that are not well supported
 		// by the Web Speech API
-		this.descReader = ($(media).data('desc-reader') == 'screenreader') ? 'screenreader' : 'browser';
+		this.descReader = (data.descReader == 'screenreader') ? 'screenreader' : 'browser';
 
 		// Default state of captions and descriptions
 		// This setting is overridden by user preferences, if they exist
 		// values for data-state-captions and data-state-descriptions are 'on' or 'off'
-		this.defaultStateCaptions = ($(media).data('state-captions') == 'off') ? 0 : 1;
-		this.defaultStateDescriptions = ($(media).data('state-descriptions') == 'on') ? 1 : 0;
+		this.defaultStateCaptions = (data.stateCaptions == 'off') ? 0 : 1;
+		this.defaultStateDescriptions = (data.stateDescriptions == 'on') ? 1 : 0;
 
 		// Default setting for prefDescPause
 		// Extended description (i.e., pausing during description) is on by default
 		// but this settings give website owners control over that
 		// since they know the nature of their videos, and whether pausing is necessary
 		// This setting is overridden by user preferences, if they exist
-		this.defaultDescPause = ($(media).data('desc-pause-default') == 'off') ? 0 : 1;
+		this.defaultDescPause = (data.descPauseDefault == 'off') ? 0 : 1;
 
 		// Headings
 		// By default, an off-screen heading is automatically added to the top of the media player
 		// It is intelligently assigned a heading level based on context, via misc.js > getNextHeadingLevel()
 		// Authors can override this behavior by manually assigning a heading level using data-heading-level
 		// Accepted values are 1-6, or 0 which indicates "no heading"
 		// (i.e., author has already hard-coded a heading before the media player; Able Player doesn't need to do this)
-		if ($(media).data('heading-level') !== undefined && $(media).data('heading-level') !== "") {
-			var headingLevel = $(media).data('heading-level');
+		if (data.headingLevel !== undefined && data.headingLevel !== "") {
+			var headingLevel = data.headingLevel;
 			if (/^[0-6]*$/.test(headingLevel)) { // must be a valid HTML heading level 1-6; or 0
 				this.playerHeadingLevel = headingLevel;
 			}
@@ -190,18 +193,18 @@ function ablePlayerSetupWindow() {
 		// 2. "external" - Automatically generated, written to an external div (requires data-transcript-div & a valid target element)
 		// 3. "popup" - Automatically generated, written to a draggable, resizable popup window that can be toggled on/off with a button
 		// If data-include-transcript="false", there is no "popup" transcript
-		var transcriptDivLocation = $(media).data('transcript-div');
+		var transcriptDivLocation = data.transcriptDiv;
 		if ( transcriptDivLocation !== undefined && transcriptDivLocation !== "" && null !== document.getElementById( transcriptDivLocation ) ) {
 			this.transcriptDivLocation = transcriptDivLocation;
 		} else {
 			this.transcriptDivLocation = null;
 		}
-		var includeTranscript = $(media).data('include-transcript');
+		var includeTranscript = data.includeTranscript;
 		this.hideTranscriptButton = ( includeTranscript !== undefined && includeTranscript === false) ? true : false;
 
 		this.transcriptType = null;
-		if ($(media).data('transcript-src') !== undefined) {
-			this.transcriptSrc = $(media).data('transcript-src');
+		if (data.transcriptSrc !== undefined) {
+			this.transcriptSrc = data.transcriptSrc;
 			if (this.transcriptSrcHasRequiredParts()) {
 				this.transcriptType = 'manual';
 			} else {
@@ -215,20 +218,20 @@ function ablePlayerSetupWindow() {
 		// In "Lyrics Mode", line breaks in WebVTT caption files are supported in the transcript
 		// If false (default), line breaks are are removed from transcripts for a more seamless reading experience
 		// If true, line breaks are preserved, so content can be presented karaoke-style, or as lines in a poem
-		this.lyricsMode = ($(media).data('lyrics-mode') !== undefined && $(media).data('lyrics-mode') !== false) ? true : false;
+		this.lyricsMode = (data.lyricsMode !== undefined && data.lyricsMode !== false) ? true : false;
 
 		// in Strict Mode, parentheses and brackets do not get marked in bold in transcripts, and line breaks are not injected.
 		// In Able Player 5.1, defaults to false.
-		this.strictMode = ($(media).data('strict-mode') === undefined && $(media).data('strict-mode') !== true) ? false : true;
+		this.strictMode = (data.strictMode === undefined && data.strictMode !== true) ? false : true;
 
 		// Set Transcript Title if defined explicitly. See transcript.js.
-		if ($(media).data('transcript-title') !== undefined && $(media).data('transcript-title') !== "") {
-			this.transcriptTitle = $(media).data('transcript-title');
+		if (data.transcriptTitle !== undefined && data.transcriptTitle !== "") {
+			this.transcriptTitle = data.transcriptTitle;
 		}
 
 		// Sign Language
 		// sign language can be a modal (default) or assigned to a div on the page.
-		var signDivLocation = $(media).data('sign-div');
+		var signDivLocation = data.signDiv;
 		if ( signDivLocation !== undefined && signDivLocation !== "" && null !== document.getElementById( signDivLocation ) ) {
 			this.$signDivLocation = $( '#' + signDivLocation );
 		} else {
@@ -239,34 +242,34 @@ function ablePlayerSetupWindow() {
 		// data-captions-position can be used to set the default captions position
 		// this is only the default, and can be overridden by user preferences
 		// valid values of data-captions-position are 'below' and 'overlay'
-		this.defaultCaptionsPosition = ($(media).data('captions-position') === 'overlay') ? 'overlay' : 'below';
+		this.defaultCaptionsPosition = (data.captionsPosition === 'overlay') ? 'overlay' : 'below';
 
 		// Chapters
-		var chaptersDiv = $(media).data('chapters-div');
+		var chaptersDiv = data.chaptersDiv;
 		if ( chaptersDiv !== undefined && chaptersDiv !== "") {
 			this.chaptersDivLocation = chaptersDiv;
 		}
 
-		if ($(media).data('chapters-title') !== undefined) {
+		if (data.chaptersTitle !== undefined) {
 			// NOTE: empty string is valid; results in no title being displayed
-			this.chaptersTitle = $(media).data('chapters-title');
+			this.chaptersTitle = data.chaptersTitle;
 		}
 
-		var defaultChapter = $(media).data('chapters-default');
+		var defaultChapter = data.chaptersDefault;
 		this.defaultChapter = ( defaultChapter !== undefined && defaultChapter !== "") ? defaultChapter : null;
 
 		// Slower/Faster buttons
 		// valid values of data-speed-icons are 'animals' (default) and 'arrows'
 		// 'animals' uses turtle and rabbit; 'arrows' uses up/down arrows
-		this.speedIcons = ($(media).data('speed-icons') === 'arrows') ? 'arrows' : 'animals';
+		this.speedIcons = (data.speedIcons === 'arrows') ? 'arrows' : 'animals';
 
 		// Seekbar
 		// valid values of data-seekbar-scope are 'chapter' and 'video'; will also accept 'chapters'
-		var seekbarScope = $(media).data('seekbar-scope');
+		var seekbarScope = data.seekbarScope;
 		this.seekbarScope = ( seekbarScope === 'chapter' || seekbarScope === 'chapters') ? 'chapter' : 'video';
 
 		// YouTube
-		var youTubeId = $(media).data('youtube-id');
+		var youTubeId = data.youTubeId;
 		if ( youTubeId !== undefined && youTubeId !== "") {
 			this.youTubeId = this.getYouTubeId(youTubeId);
 			if ( ! this.hasPoster ) {
@@ -275,29 +278,29 @@ function ablePlayerSetupWindow() {
 			}
 		}
 
-		var youTubeDescId = $(media).data('youtube-desc-id');
+		var youTubeDescId = data.youTubeDescId;
 		if ( youTubeDescId !== undefined && youTubeDescId !== "") {
 			this.youTubeDescId = this.getYouTubeId(youTubeDescId);
 		}
 
-		var youTubeSignId = $(media).data('youtube-sign-src');
+		var youTubeSignId = data.youTubeSignId;
 		if ( youTubeSignId !== undefined && youTubeSignId !== "") {
 			this.youTubeSignId = this.getYouTubeId(youTubeSignId);
 		}
 
-		var youTubeNoCookie = $(media).data('youtube-nocookie');
+		var youTubeNoCookie = data.youTubeNoCookie;
 		this.youTubeNoCookie = (youTubeNoCookie !== undefined && youTubeNoCookie) ? true : false;
 
 		// Vimeo
-		var vimeoId = $(media).data('vimeo-id');
+		var vimeoId = data.vimeoId;
 		if ( vimeoId !== undefined && vimeoId !== "") {
 			this.vimeoId = this.getVimeoId(vimeoId);
 			if ( ! this.hasPoster ) {
 				let poster = thisObj.getVimeoPosterUrl(this.vimeoId,'1200');
 				$(media).attr( 'poster', poster );
 			}
 		}
-		var vimeoDescId = $(media).data('vimeo-desc-id');
+		var vimeoDescId = data.vimeoDescId;
 		if ( vimeoDescId !== undefined && vimeoDescId !== "") {
 			this.vimeoDescId = this.getVimeoId(vimeoDescId);
 		}
@@ -306,15 +309,15 @@ function ablePlayerSetupWindow() {
 		// valid values of data-skin are:
 		// '2020' (default as of 4.6), all buttons in one row beneath a full-width seekbar
 		// 'legacy', two rows of controls; seekbar positioned in available space within top row
-		this.skin = ($(media).data('skin') == 'legacy') ? 'legacy' : '2020';
+		this.skin = (data.skin == 'legacy') ? 'legacy' : '2020';
 
 		// Size
 		// width of Able Player is determined using the following order of precedence:
 		// 1. data-width attribute
 		// 2. width attribute (for video or audio, although it is not valid HTML for audio)
 		// 3. Intrinsic size from video (video only, determined later)
-		if ($(media).data('width') !== undefined) {
-			this.playerWidth = parseInt($(media).data('width'));
+		if (data.width !== undefined) {
+			this.playerWidth = parseInt(data.width);
 		} else if ($(media)[0].getAttribute('width')) {
 			// NOTE: jQuery attr() returns null for all invalid HTML attributes
 			// (e.g., width on <audio>)
@@ -324,7 +327,7 @@ function ablePlayerSetupWindow() {
 			this.playerWidth = null;
 		}
 
-		var allowFullScreen = $(media).data('allow-fullscreen');
+		var allowFullScreen = data.allowFullscreen;
 		this.allowFullscreen = (allowFullScreen !== undefined && allowFullScreen === false) ? false : true;
 
 		// Define other variables that are used in fullscreen program flow
@@ -337,8 +340,8 @@ function ablePlayerSetupWindow() {
 		// Calculation attempts to intelligently assign a reasonable interval based on media length
 		this.defaultSeekInterval = 10;
 		this.useFixedSeekInterval = false; // will change to true if media has valid data-seek-interval attribute
-		if ($(media).data('seek-interval') !== undefined && $(media).data('seek-interval') !== "") {
-			var seekInterval = $(media).data('seek-interval');
+		if (data.seekInterval !== undefined && data.seekInterval !== "") {
+			var seekInterval = data.seekInterval;
 			if (/^[1-9][0-9]*$/.test(seekInterval)) { // must be a whole number greater than 0
 				this.seekInterval = seekInterval;
 				this.useFixedSeekInterval = true; // do not override with calculuation
@@ -348,12 +351,12 @@ function ablePlayerSetupWindow() {
 		// Now Playing
 		// Shows "Now Playing:" plus the title of the current track above player
 		// Only used if there is a playlist
-		var showNowPlaying = $(media).data('show-now-playing');
+		var showNowPlaying = data.showNowPlaying;
 		this.showNowPlaying = (showNowPlaying !== undefined && showNowPlaying === false) ? false : true;
 
 		// Fallback
 		// The data-test-fallback attribute can be used to test the fallback solution in any browser
-		var testFallback = $(media).data('test-fallback');
+		var testFallback = data.testFallback;
 		if ( testFallback !== undefined && testFallback !== false) {
 			// 1: build error; 2: browser doesn't support media.
 			this.testFallback = ( testFallback == '2' ) ? 2 : 1;
@@ -367,45 +370,45 @@ function ablePlayerSetupWindow() {
 		// 2. Lang attribute on <html> or <body>, if a matching translation file is available
 		// 3. English
 		// Final calculation occurs in translation.js > getTranslationText()
-		var lang = $(media).data('lang');
+		var lang = data.lang;
 		this.lang = ( lang !== undefined && lang !== "") ? lang.toLowerCase() : null;
 
 		// Metadata Tracks
-		var metaType = $(media).data('meta-type');
+		var metaType = data.metaType;
 		if ( metaType !== undefined && metaType !== "") {
 			this.metaType = metaType;
 		}
-		var metaDiv = $(media).data('meta-div');
+		var metaDiv = data.metaDiv;
 		if ( metaDiv !== undefined && metaDiv !== "") {
 			this.metaDiv = metaDiv;
 		}
 
 		// Search
 		// conducting a search requires an external div in which to write the results
-		var searchDiv = $(media).data('search-div');
+		var searchDiv = data.searchDiv;
 		if ( searchDiv !== undefined && searchDiv !== "") {
 
 			this.searchDiv = searchDiv;
 
 			// Search term (optional; could be assigned later in a JavaScript application)
-			var searchString = $(media).data('search');
+			var searchString = data.search;
 			if ( searchString !== undefined && searchString !== "") {
 				this.searchString = searchString;
 			}
 
 			// Search Language
-			var searchLang = $(media).data('search-lang');
+			var searchLang = data.searchLang;
 			this.searchLang = ( searchLang !== undefined && searchLang !== "") ? searchLang : null;
 
 			// Search option: Ignore capitalization in search terms
-			var searchIgnoreCaps = $(media).data('search-ignore-caps');
+			var searchIgnoreCaps = data.searchIgnoreCaps;
 			this.searchIgnoreCaps = ( searchIgnoreCaps !== undefined && searchIgnoreCaps !== false) ? true : false;
 		}
 
 		// Hide controls when video starts playing
 		// They will reappear again when user presses a key or moves the mouse
 		// As of v4.0, controls are hidden automatically on playback in fullscreen mode
-		if ($(media).data('hide-controls') !== undefined && $(media).data('hide-controls') !== false) {
+		if (data.hideControls !== undefined && data.hideControls !== false) {
 			this.hideControls = true;
 			this.hideControlsOriginal = true; // a copy of hideControls, since the former may change if user enters full screen mode
 		} else {
@@ -416,11 +419,11 @@ function ablePlayerSetupWindow() {
 		// Steno mode
 		// Enable support for Able Player keyboard shortcuts in textaarea fields
 		// so users can control the player while transcribing
-		if ($(media).data('steno-mode') !== undefined && $(media).data('steno-mode') !== false) {
+		if (data.stenoMode !== undefined && data.stenoMode !== false) {
 			this.stenoMode = true;
 			// Add support for stenography in an iframe via data-steno-iframe-id
-			if ($(media).data('steno-iframe-id') !== undefined && $(media).data('steno-iframe-id') !== "") {
-				this.stenoFrameId = $(media).data('steno-iframe-id');
+			if (data.stenoIframeId !== undefined && data.stenoIframeId !== "") {
+				this.stenoFrameId = data.stenoIframeId;
 				this.$stenoFrame = $('#' + this.stenoFrameId);
 				if (!(this.$stenoFrame.length)) {
 					// iframe not found