overlay extension: mp4 support; smaller overlay box for mp3

index.html

@@ -152,7 +152,12 @@ cpietsch@gmail.com
                       -
                     </div>
                     <div v-else-if="item[entry.source].split('.').pop() === 'mp3'">
-                      <a :href="item[entry.source]" target="_blank" class="overlayLink audio noIcon" data-overlay-left-right-margin="10%" data-overlay-top-bottom-margin="10%">
+                      <a :href="item[entry.source]" target="_blank" class="overlayLink audio noIcon" data-overlay-left-right-margin="25%" data-overlay-top-bottom-margin="25%">
+                        {{ item[entry.source].split('/').pop() }}
+                      </a>
+                    </div>
+                    <div v-else-if="item[entry.source].split('.').pop() === 'mp4'">
+                      <a :href="item[entry.source]" target="_blank" class="overlayLink video noIcon" data-overlay-left-right-margin="10%" data-overlay-top-bottom-margin="10%">
                         {{ item[entry.source].split('/').pop() }}
                       </a>
                     </div>

js/overlayer.js

@@ -54,7 +54,14 @@
 							+'<audio controls="controls">'
 							+'<source src="'+hrefAttr+'" />'
 							+'</audio></div>');
-					} else{
+					}
+                                        else if(hrefAttr.split('.').pop() == 'mp4'){
+                                                $('#overlayBoxContent', window.top.document).html('<div style="height: 100%; display: flex; justify-content: center; align-items: center;">'
+                                                        +'<video controls="controls">'
+                                                        +'<source src="'+hrefAttr+'" />'
+                                                        +'</video></div>');
+                                        }
+                                        else{
 						$('#overlayBoxContent', window.top.document).html('<iframe width="100%" height="99%" src="'+hrefAttr+'" style="background-color:white;"></iframe>');
       					}
 				}