Wordpress - Bootstrap Modal - Mediaelement.js - Advanced Custom Fields - The Loop - Video Popups - Custom Post Type - HTML5 : Loop through a CPT with ACF, with a video name variable hosted on a CDN. Show on click, hide on end, and restart from beginning of clip

WP Templates: Video Loop in Modal

<?php $loop = new WP_Query(array('post_type' => 'video-faq', 'posts_per_page' => 30, 'order' => 'ASC', 'orderby' => 'menu_order')); ?>
<?php $i = 1; //get the number count ?>
<?php while ($loop->have_posts()) : $loop->the_post(); ?>
  <?php $videoName = get_field('video_file_name'); ?>
  <!--Button to trigger popup-->
  <p><?php echo $i;?>. <a href="#question<?php echo $i;?>" role="button" data-toggle="modal"><?php the_title(); ?></a></p>

<div id="question<?php echo $i;?>" class="modal hide fade video-pop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-body">
		<?php echo do_shortcode('[video mp4="http://bitcast-a.bitgravity.com/netcom/ingage/html5/' . $videoName . '.mp4" ogg="http://bitcast-a.bitgravity.com/netcom/ingage/html5/' . $videoName . '.ogv" webm="http://bitcast-a.bitgravity.com/netcom/ingage/html5/' . $videoName . '.webm" poster="/assets/img/poster-484x362.png" preload="true" fullscreen="false" volume="false"  width="484" height="362" ]'); ?>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	</div>
</div>
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			// On pop play clip
			$("[id='question<?php echo $i; ?>']").on('shown', function () {
				$("#wp_mep_<?php echo $i; ?>").get(0).play();
			});
			//Hide Modal
			$("#wp_mep_<?php echo $i; ?>").on('ended', function () {
				$("[id='question<?php echo $i; ?>']").modal("hide");
			});

			// On close pause and restart clip
			$("[id^='question<?php echo $i; ?>']").on('hidden', function () {
				$("#wp_mep_<?php echo $i; ?>").get(0).pause();
				$("#wp_mep_<?php echo $i; ?>").get(0).currentTime = 0;
			});

		});
	</script>
	<?php $i++; ?>
<?php endwhile; ?>
<?php wp_reset_query(); ?>

Needs to be cleaned up so JS is cleaner and does not have to be repeated throughout loop. (Array?)

How have you found this works in IE with Flash?

Yes it does! The great thing with this implementation is that it utilizes Mediaelement.js for your video which will automatically load the mp4 file in a flash player for IE8 and less. The only real difference that you will notice is a little bit of a slower loading time and the flash video will not autoplay when the modal opens. This snippet is for use in Wordpress but could be changed up for use anywhere else with Bootstrap /Mediaelement/ Jquery