diff --git a/assets/css/default.css b/assets/css/default.css
index bdb3e18e3..0727cfddd 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -351,6 +351,12 @@ span > select {
background-color: rgba(0, 182, 240, 1);
}
+/* Overlay */
+.video-js .vjs-overlay {
+ background-color: rgba(35, 35, 35, 0.5);
+ color: rgba(255, 255, 255, 1);
+}
+
/* ProgressBar marker */
.vjs-marker {
background-color: rgba(255, 255, 255, 1);
diff --git a/assets/css/videojs-overlay.css b/assets/css/videojs-overlay.css
new file mode 100644
index 000000000..3ba5a574d
--- /dev/null
+++ b/assets/css/videojs-overlay.css
@@ -0,0 +1 @@
+.video-js .vjs-overlay{color:#fff;position:absolute;text-align:center}.video-js .vjs-overlay-no-background{max-width:33%}.video-js .vjs-overlay-background{background-color:#646464;background-color:rgba(255,255,255,0.4);border-radius:3px;padding:10px;width:33%}.video-js .vjs-overlay-top-left{top:5px;left:5px}.video-js .vjs-overlay-top{left:50%;margin-left:-16.5%;top:5px}.video-js .vjs-overlay-top-right{right:5px;top:5px}.video-js .vjs-overlay-right{right:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-bottom-right{bottom:3.5em;right:5px}.video-js .vjs-overlay-bottom{bottom:3.5em;left:50%;margin-left:-16.5%}.video-js .vjs-overlay-bottom-left{bottom:3.5em;left:5px}.video-js .vjs-overlay-left{left:5px;top:50%;transform:translateY(-50%)}.video-js .vjs-overlay-center{left:50%;margin-left:-16.5%;top:50%;transform:translateY(-50%)}.video-js .vjs-no-flex .vjs-overlay-left,.video-js .vjs-no-flex .vjs-overlay-center,.video-js .vjs-no-flex .vjs-overlay-right{margin-top:-15px}
diff --git a/assets/js/player.js b/assets/js/player.js
index 8854d859d..ae9a8b257 100644
--- a/assets/js/player.js
+++ b/assets/js/player.js
@@ -102,6 +102,22 @@ var player = videojs('player', options, function () {
});
});
+if (location.pathname.startsWith('/embed/')) {
+ player.overlay({
+ overlays: [{
+ start: 'loadstart',
+ content: '
' + player_data.title + '
',
+ end: 'playing',
+ align: 'top'
+ }, {
+ start: 'pause',
+ content: '' + player_data.title + '
',
+ end: 'playing',
+ align: 'top'
+ }]
+ });
+}
+
player.on('error', function (event) {
if (player.error().code === 2 || player.error().code === 4) {
setInterval(setTimeout(function (event) {
diff --git a/assets/js/videojs-overlay.min.js b/assets/js/videojs-overlay.min.js
new file mode 100644
index 000000000..8182c26cf
--- /dev/null
+++ b/assets/js/videojs-overlay.min.js
@@ -0,0 +1,2 @@
+/*! @name videojs-overlay @version 2.1.4 @license Apache-2.0 */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("video.js"),require("global/window")):"function"==typeof define&&define.amd?define(["video.js","global/window"],e):t.videojsOverlay=e(t.videojs,t.window)}(this,function(t,e){"use strict";function n(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}t=t&&t.hasOwnProperty("default")?t.default:t,e=e&&e.hasOwnProperty("default")?e.default:e;var r={align:"top-left",class:"",content:"This overlay will show up while the video is playing",debug:!1,showBackground:!0,attachToControlBar:!1,overlays:[{start:"playing",end:"paused"}]},i=t.getComponent("Component"),o=t.dom||t,s=t.registerPlugin||t.plugin,a=function(t){return"number"==typeof t&&t==t},h=function(t){return"string"==typeof t&&/^\S+$/.test(t)},d=function(r){var i,s;function d(t,e){var i;return i=r.call(this,t,e)||this,["start","end"].forEach(function(t){var e=i.options_[t];if(a(e))i[t+"Event_"]="timeupdate";else if(h(e))i[t+"Event_"]=e;else if("start"===t)throw new Error('invalid "start" option; expected number or string')}),["endListener_","rewindListener_","startListener_"].forEach(function(t){i[t]=function(e){return d.prototype[t].call(n(n(i)),e)}}),"timeupdate"===i.startEvent_&&i.on(t,"timeupdate",i.rewindListener_),i.debug('created, listening to "'+i.startEvent_+'" for "start" and "'+(i.endEvent_||"nothing")+'" for "end"'),i.hide(),i}s=r,(i=d).prototype=Object.create(s.prototype),i.prototype.constructor=i,i.__proto__=s;var l=d.prototype;return l.createEl=function(){var t=this.options_,n=t.content,r=t.showBackground?"vjs-overlay-background":"vjs-overlay-no-background",i=o.createEl("div",{className:"\n vjs-overlay\n vjs-overlay-"+t.align+"\n "+t.class+"\n "+r+"\n vjs-hidden\n "});return"string"==typeof n?i.innerHTML=n:n instanceof e.DocumentFragment?i.appendChild(n):o.appendContent(i,n),i},l.debug=function(){if(this.options_.debug){for(var e=t.log,n=e,r=arguments.length,i=new Array(r),o=0;o=n:n===e},l.show=function(){return r.prototype.show.call(this),this.off(this.player(),this.startEvent_,this.startListener_),this.debug("shown"),this.debug('unbound `startListener_` from "'+this.startEvent_+'"'),this.endEvent_&&(this.debug('bound `endListener_` to "'+this.endEvent_+'"'),this.on(this.player(),this.endEvent_,this.endListener_)),this},l.shouldShow_=function(t,e){var n=this.options_.start,r=this.options_.end;return a(n)?a(r)?t>=n&&t=n):n===e},l.startListener_=function(t){var e=this.player().currentTime();this.shouldShow_(e,t.type)&&this.show()},l.endListener_=function(t){var e=this.player().currentTime();this.shouldHide_(e,t.type)&&this.hide()},l.rewindListener_=function(t){var e=this.player().currentTime(),n=this.previousTime_,r=this.options_.start,i=this.options_.end;e
<%= rendered "components/player_sources" %>
+
+
<%= HTML.escape(video.title) %> - Invidious