Wistia Background Video

wistia-player.php

<?php
/**
 * MODULE - Wistia Player.
 *
 * Autoplay nuted Wistia Video in the background and remove from DOM when done.
 */

/**
 * Accepts 'class','wistia_id'.
 */

$defaults = [
	'class'     => [ 'module-wistia', 'wistia', 'video-embed' ],
	'wistia_id' => false,
];

$args = return_formatted_args( $args, $defaults );

?>

<?php if ( $args['wistia_id'] ) : ?>


	<div id="wistia-<?php echo esc_attr( $args['wistia_id'] ); ?>">

		<div class="background-wrapper">
			<iframe src="//fast.wistia.com/embed/iframe/<?php echo esc_attr( $args['wistia_id'] ); ?>?videoFoam=true&autoPlay=true&muted=true&controlsVisibleOnLoad=false&&wmode=transparent" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" id="hero-video" name="wistia_embed"></iframe>
			<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
		</div><!-- .background-wrapper -->

	</div><!-- #wistia-{*} -->
<?php 
endif;

wistia.js

/**
 * File wistia.js
 *
 * Deal with background wistia video playback.
 */

( function () {
	// grab Wista API
	const wistiaEmbed = document.getElementById( 'hero-video' ).wistiaApi;

	// when the video has finished playing, remove .
	wistiaEmbed.bind( 'end', function () {
		wistiaEmbed.remove();
	} );
} )();