<pre class="lang:php decode:true ">$webm     = get_field( 'video_webm' );
$mp4      = get_field( 'video_mp4' );
$fallback = get_field( 'fallback_image' );

?&gt;
&lt;section class="video-section"&gt;
	&lt;?php if ( 'video' === $banner_type ) : ?&gt;
		&lt;video class="aquatic-video" autoplay loop poster="&lt;?php echo $fallback; ?&gt;" id="aquatic-video"&gt;
			&lt;source src="&lt;?php echo $webm; ?&gt;" type="video/webm"&gt;
			&lt;source src="&lt;?php echo $mp4; ?&gt;" type="video/mp4"&gt;
		&lt;/video&gt;
	&lt;?php endif; ?&gt;
&lt;/section&gt;</pre>
<pre class="lang:php decode:true ">&lt;?php
if( function_exists('acf_add_local_field_group') ):

acf_add_local_field_group(array (
	'key' =&gt; 'group_5764f70711dca',
	'title' =&gt; 'HTML5 Video',
	'fields' =&gt; array (
		array (
			'key' =&gt; 'field_57996c316dbae',
			'label' =&gt; 'mp4 file',
			'name' =&gt; 'video_mp4',
			'type' =&gt; 'file',
			'return_format' =&gt; 'url',
			'library' =&gt; 'all',
			'mime_types' =&gt; 'mp4',
		),
		array (
			'key' =&gt; 'field_57996c4b6dbaf',
			'label' =&gt; 'webm file',
			'name' =&gt; 'video_webm',
			'type' =&gt; 'file',
			'return_format' =&gt; 'url',
			'library' =&gt; 'all',
			'mime_types' =&gt; 'webm',
		),
		array (
			'key' =&gt; 'field_57996c646dbb0',
			'label' =&gt; 'Fallback Image',
			'name' =&gt; 'fallback_image',
			'type' =&gt; 'image',
			'return_format' =&gt; 'url',
			'preview_size' =&gt; 'medium',
			'library' =&gt; 'all',
		),
	),
	'location' =&gt; array (
		array (
			array (
				'param' =&gt; 'page_template',
				'operator' =&gt; '==',
				'value' =&gt; 'front-template.php',
			),
		),
	),
	'menu_order' =&gt; 0,
	'position' =&gt; 'normal',
	'style' =&gt; 'default',
	'label_placement' =&gt; 'top',
	'instruction_placement' =&gt; 'label',
	'hide_on_screen' =&gt; '',
	'active' =&gt; 1,
	'description' =&gt; '',
));

endif;</pre>
<pre class="lang:css decode:true "> video {
 	vertical-align: middle;
 	object-fit: inherit;
 }

 #play {
 	display: none;
 	position: absolute;
 	bottom: 5px;
 	right: 5px;
 	z-index: 999;
 	cursor: pointer;
 	font-size: 30px;
 	color: white;
 	@media (min-width: 768px) {
 		bottom: 30px;
 		right: 30px;
 		font-size: 40px;
 	}
 }</pre>
<pre class="lang:js decode:true ">jQuery(window).load(function () {
	jQuery('#play').fadeIn('slow');
	vidPlayButtonText();
	jQuery('#play').click(function () {
		vidPlayPause();
	});
});

function vidPlayPause() {
	var video = document.getElementById("aquatic-video");
	if (video !== null) {
		if (video.paused) {
			video.play();
		} else {
			video.pause();
		}
		vidPlayButtonText();
	}
}

function vidPlayButtonText() {
	var video = document.getElementById("aquatic-video");
	var button = document.getElementById("play");
	if ( video === null || button === null )
		return;

	if (video.paused) {
		button.className = "fa fa-play-circle";
	} else {
		button.className = "fa fa-pause-circle";
	}
}</pre>
&nbsp;