Created
January 8, 2014 23:21
-
-
Save astromac/8326611 to your computer and use it in GitHub Desktop.
Plays selected video element in a Bootstrap modal window.
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
| // Play very small videos in modal box | |
| if ($(window).width() > 750) { | |
| var allvideos = $('video'); | |
| // Hide controls for very small videos | |
| for (var i = 0; i < allvideos.length; i++) { | |
| if ($(allvideos[i]).width() < 470) { | |
| $(allvideos[i]).removeAttr('controls'); | |
| // Insert poster image for IE 9 | |
| if ($('html').hasClass('IE-9')) { | |
| $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">'); | |
| } else { | |
| $(allvideos[i]).after('<img class="poster-overlay" src="img/poster-overlay.png" alt="play video">'); | |
| } | |
| } | |
| } | |
| // Add click event to video container that brings up video in a modal window | |
| $('.modal-trigger').on('click', function () { | |
| if ($(this).width() < 470) { | |
| // Get video/img, title and any copy text | |
| var media = $(this).html(); | |
| var title = $(this).next().children('.modal-heading').text(); | |
| var copy = $(this).next().children('.modal-copy').text(); | |
| if (! title.length) { title = '<br>'; } | |
| // Insert video, title and copy text into modal window | |
| var modalsrc = []; | |
| var modaltype = []; | |
| $(media).children('source').each(function () { | |
| modalsrc.push($(this).attr('src')); | |
| modaltype.push($(this).attr('type')); | |
| }); | |
| $('.modal-title').html(title); | |
| $('.modal-body > .media').html(media); | |
| $('.modal-body > .copy').text(copy); | |
| $('#modal-window .poster-overlay').remove(); | |
| // Assign a random version to video src to bypass cache | |
| var modalsources = $('#modal-window source'); | |
| var nocachesrc = ''; | |
| for (var i = 0; i < modalsources.length; i++) { | |
| nocachesrc = modalsrc[i] + '?rnd=' + Math.random()*Math.random(); | |
| modalsources[i].setAttribute('src', nocachesrc); | |
| modalsources[i].setAttribute('type', modaltype[i]); | |
| } | |
| var modalvideo = $('#modal-window video'); | |
| modalvideo[0].setAttribute('controls', 'controls'); | |
| // Reveal modal window and play video | |
| $('#modal-window').modal('show'); | |
| $('#modal-window').on('shown.bs.modal', function () { | |
| modalvideo[0].play(); | |
| }); | |
| // Stop playing video when modal window is closed | |
| $('#modal-window').on('hide.bs.modal', function () { | |
| modalvideo[0].pause(); | |
| }); | |
| } | |
| }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment