Visual Path: allow mp4 videos

Author: craigdietrich

system/application/views/melons/cantaloupe/css/common.css

@@ -589,7 +589,13 @@ a:hover { text-decoration: underline; }
 .image_header.has_video {
 	position:relative;
 }
-.splash .video_wrapper, .image_header .video_wrapper  {
+.visual_path .sp-block.has_video h1, .visual_path .sp-block.has_video .sp-block__content {
+	position:relative; z-index:1;
+}
+.visual_path .sp-block.has_video .video_wrapper {
+	z-index:0;
+}
+.splash .video_wrapper, .image_header .video_wrapper, .visual_path .video_wrapper  {
   position: absolute;
   top: 0; right:0; bottom:0; left:0;
   overflow: hidden;

system/application/views/melons/cantaloupe/js/scalarpage.jquery.js

@@ -2939,13 +2939,24 @@
                                         };
                                     };
                                     var default_view = pathContents[i].current.defaultView;
-                                    var media_urls = [];
                                     $("[property='sioc:content']").append('<div class="sp-block sp-block-'+default_view+'" id="'+slug+'"><h1 class="padded-multiline"><a class="sp-title" href="'+base_url+slug+'">' + title + '</a></h1><div class="sp-block__content ' +slug+ '">' +((description.length)?description:'')+ '</div></div>');
                                     // set background
-                                    $("#"+slug).css({ "background-image": 'url("'+((key.length)?key:'')+'")' }).find('.sp-block__content').append('<div><a class="nav_btn primary" href="'+base_url+slug+'">Continue</a></div>');
-                                    if (description.length) {
-                                        $("."+slug).css("background-color", "#fff");
+                                    if ('.mp4'==key.substr(key.length-4, 4)) {  // The controller looks for ".mp4" so do the same here ~cd
+                                    	$("#"+slug).addClass('has_video').prepend('<div class="video_wrapper"><video autoplay muted loop playsinline preload="none"><source src="'+key+'" type="video/mp4"></video></div>');
+                                    	$("#"+slug).find('.video_wrapper video:first').on('loadedmetadata', function() {
+                                    		var $video = $(this);
+                                    		$video.data('orig_w', parseInt($video.get(0).videoWidth));
+                                    		$video.data('orig_h', parseInt($video.get(0).videoHeight));
+                                    		$(window).resize(function() {
+                                    			cover_video.call($video.get(0));
+                                    		}).trigger('resize');
+                                    	});
+                                    } else {
+                                        $("#"+slug).css({ "background-image": 'url("'+((key.length)?key:'')+'")' });
                                     };
+                                    // end set background
+                                    $('#'+slug).find('.sp-block__content').append('<div><a class="nav_btn primary" href="'+base_url+slug+'">Continue</a></div>')
+                                    if (description.length) $("."+slug).css("background-color", "#fff");
                                     $("#"+slug).append('<div style="visibility:hidden; clear:both; height:1px; overflow:hidden;"></div>');
                                 }
                             }