Last active
December 23, 2015 08:59
-
-
Save barbwiredmedia/6611936 to your computer and use it in GitHub Desktop.
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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(); ?> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Needs to be cleaned up so JS is cleaner and does not have to be repeated throughout loop. (Array?)