previewIframe( url ) {

		this.close();

		this.state = { previewIframe: url };

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

		this.viewport.innerHTML =
			`<header class="r-overlay-header">
				<a class="r-overlay-button r-overlay-external" href="${url}" target="_blank"><span class="icon"></span></a>
				<button class="r-overlay-button r-overlay-close"><span class="icon"></span></button>
			</header>
			<div class="r-overlay-spinner"></div>
			<div class="r-overlay-content">
				<iframe src="${url}"></iframe>
				<small class="r-overlay-content-inner">
					<span class="r-overlay-error x-frame-error">Unable to load iframe. This is likely due to the site's policy (x-frame-options).</span>
				</small>
			</div>`;

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

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

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

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

	}
Opens a lightbox that previews the target URL.

@param {string} url - url for lightbox iframe src