diff --git a/src/css/video-js.css b/src/css/video-js.css index f3a466f9a..36ca7db98 100644 --- a/src/css/video-js.css +++ b/src/css/video-js.css @@ -328,11 +328,11 @@ so you can upgrade to newer versions easier. You can remove all these styles by .vjs-default-skin .vjs-volume-bar { width: 5em; height: 0.6em; - margin: 1em auto 0; + margin: 1.1em auto 0; } .vjs-default-skin .vjs-volume-menu-button .vjs-menu-content { - height: 2.5em; + height: 2.9em; } .vjs-default-skin .vjs-volume-level { @@ -352,7 +352,7 @@ so you can upgrade to newer versions easier. You can remove all these styles by .vjs-default-skin .vjs-volume-handle:before { font-size: 0.9em; - top: -0.3em; + top: -0.2em; left: -0.2em; width: 1em; diff --git a/src/js/controls.js b/src/js/controls.js index f8151a920..b61cb471c 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -68,6 +68,7 @@ vjs.ControlBar.prototype.options_ = { 'fullscreenToggle': {}, 'volumeControl': {}, 'muteToggle': {} + // 'volumeMenuButton': {} } }; diff --git a/src/js/menu.js b/src/js/menu.js index da01a55cc..76cdb23f8 100644 --- a/src/js/menu.js +++ b/src/js/menu.js @@ -21,9 +21,24 @@ vjs.Menu.prototype.addItem = function(component){ /** @inheritDoc */ vjs.Menu.prototype.createEl = function(){ - return vjs.Component.prototype.createEl.call(this, 'ul', { + var contentElType = this.options().contentElType || 'ul'; + this.contentEl_ = vjs.createEl(contentElType, { + className: 'vjs-menu-content' + }); + var el = vjs.Component.prototype.createEl.call(this, 'div', { + append: this.contentEl_, className: 'vjs-menu' }); + el.appendChild(this.contentEl_); + + // Prevent clicks from bubbling up. Needed for Menu Buttons, + // where a click on the parent is significant + vjs.on(el, 'click', function(event){ + event.preventDefault(); + event.stopImmediatePropagation(); + }); + + return el; }; /**