diff --git a/app/assets/javascripts/mediaelement-title/mep-feature-title.js b/app/assets/javascripts/mediaelement-title/mep-feature-title.js
index 17ad899..1679d99 100644
--- a/app/assets/javascripts/mediaelement-title/mep-feature-title.js
+++ b/app/assets/javascripts/mediaelement-title/mep-feature-title.js
@@ -1,14 +1,22 @@
 (function($) {
         $.extend(mejs.MepDefaults, {
-		title: null,
-		titleLink: null
+                title: null,
+                titleLink: null
         });
 
         $.extend(MediaElementPlayer.prototype, {
-		buildtitle: function(player, controls, layers, media) {
+                buildtitle: function(player, controls, layers, media) {
                         if (player.isVideo && player.options.title != null ) {
-				$('<div class="mejs-overlay mejs-overlay-title"><a href="' + player.options.titleLink + '">' + player.options.title + '</a></div>').appendTo(layers)
+                                title = $('<div class="mejs-title"><a href="' + player.options.titleLink + '">' + player.options.title + '</a></div>');
+                                title.insertAfter(layers);
+                                media.addEventListener('play',function() {
+                                        title.hide();
+                                }, false);
+                                media.addEventListener('pause',function() {
+                                        title.show();
+                                }, false);
                         }
                 }
         });
 })(mejs.$);
+
diff --git a/app/assets/stylesheets/mediaelement-title/mejs-title.css.erb b/app/assets/stylesheets/mediaelement-title/mejs-title.css.erb
index d363cb8..c9e8385 100755
--- a/app/assets/stylesheets/mediaelement-title/mejs-title.css.erb
+++ b/app/assets/stylesheets/mediaelement-title/mejs-title.css.erb
@@ -1,14 +1,15 @@
-.mejs-overlay-title {
-	width: 100%; 
-	z-index: 999;
-}
-
-.mejs-overlay-title a {
-	color: white; 
-	display: block; 
-	font-weight: bold; 
-	font-size: 15pt; 
-	margin: 10px 15px; 
-	text-shadow: 0px 0px 2px rgb(0, 0, 0);
-}
-
+.mejs-title { 
+        width: 100%;  
+        z-index: 999; 
+        position: absolute; 
+        top: 0; 
+        left: 0; 
+        background: rgba(35, 35, 38, 0.8); 
+} 
+ 
+.mejs-title a { 
+        color: white;  
+        display: block;  
+        font-size: 12pt;  
+        margin: 10px 15px;  
+}