previewMedia( url, mediaType, fitMode ) {

		if( mediaType !== 'image' && mediaType !== 'video' ) {
			console.warn( 'Please specify a valid media type to preview (image|video)' );
			return;
		}

		this.close();

		fitMode = fitMode || 'scale-down';

		this.createOverlay( 'r-overlay-preview' );
		this.dom.dataset.state = 'loading';
		this.dom.dataset.previewFit = fitMode;

		this.viewport.innerHTML =
			`<header class="r-overlay-header">
				<button class="r-overlay-button r-overlay-close">Esc <span class="icon"></span></button>
			</header>
			<div class="r-overlay-spinner"></div>
			<div class="r-overlay-content"></div>`;

		const contentElement = this.dom.querySelector( '.r-overlay-content' );

		if( mediaType === 'image' ) {

			this.state = { previewImage: url, previewFit: fitMode }

			const img = document.createElement( 'img', {} );
			img.src = url;
			contentElement.appendChild( img );

			img.addEventListener( 'load', () => {
				this.dom.dataset.state = 'loaded';
			}, false );

			img.addEventListener( 'error', () => {
				this.dom.dataset.state = 'error';
				contentElement.innerHTML =
						`<span class="r-overlay-error">Unable to load image.</span>`
			}, false );

			// Hide image overlays when clicking outside the overlay
			this.dom.style.cursor = 'zoom-out';
			this.dom.addEventListener( 'click', ( event ) => {
				this.close();
			}, false );

			this.Reveal.dispatchEvent({ type: 'previewimage', data: { url } });

		}
		else if( mediaType === 'video' ) {

			this.state = { previewVideo: url, previewFit: fitMode }

			const video = document.createElement( 'video' );
			video.autoplay = this.dom.dataset.previewAutoplay === 'false' ? false : true;
			video.controls = this.dom.dataset.previewControls === 'false' ? false : true;
			video.loop = this.dom.dataset.previewLoop === 'true' ? true : false;
			video.muted = this.dom.dataset.previewMuted === 'true' ? true : false;
			video.playsInline = true;
			video.src = url;
			contentElement.appendChild( video );

			video.addEventListener( 'loadeddata', () => {
				this.dom.dataset.state = 'loaded';
			}, false );

			video.addEventListener( 'error', () => {
				this.dom.dataset.state = 'error';
				contentElement.innerHTML =
					`<span class="r-overlay-error">Unable to load video.</span>`;
			}, false );

			this.Reveal.dispatchEvent({ type: 'previewvideo', data: { url } });

		}
		else {
			throw new Error( 'Please specify a valid media type to preview' );
		}

		this.dom.querySelector( '.r-overlay-close' ).addEventListener( 'click', ( event ) => {
			this.close();
			event.preventDefault();
		}, false );

	}
Opens a lightbox window that provides a larger view of the
given image/video.

@param {string} url - url to the image/video to preview
@param {image|video} mediaType
@param {string} [fitMode] - the fit mode to use for the preview