feat(player): Added new option to enable buttons to contain submenus,…

… instead of putting all of them inside the `Settings` control

README.md

@@ -86,6 +86,8 @@ Sometimes you need more flexibility instantiating the player (for example, addin
 
 ```javascript
 var player = new OpenPlayer('[player ID]', [valid VAST/VPAID URL|List of VAST/VPAID URLs], [`true|false` for fullscreen effect by default], {
+    // Allow items to be contained in a different space outside of `Settings`
+    detachMenus,
     // Number of ms that takes the player to hide the Play button once it starts playing (video only)
     // (bt default, `350`)
     hidePlayBtnTimer,

dist/openplayer.css

@@ -134,6 +134,7 @@
     line-height: 1.15;
     margin: 0;
     overflow: visible;
+    position: relative;
     text-transform: none;
 }
 .op-controls > button {
@@ -244,6 +245,9 @@
 .op-controls > button:hover {
     opacity: 0.5;
 }
+.op-controls > .op-control--no-hover:hover {
+    opacity: 1;
+}
 .op-controls input[type='range'],
 .op-controls > button {
     -ms-touch-action: manipulation;
@@ -311,6 +315,24 @@
     will-change: width,height;
     z-index: 4;
 }
+.op-controls > button > .op-settings {
+    bottom: 35px;
+    overflow: visible;
+    right: -20px;
+}
+.op-controls > button > .op-settings:after {
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid rgba(28, 28, 28, .9);
+    content:'';
+    height: 0;
+    left: 0;
+    margin: 0 auto;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    width: 0;
+}
 .op-player__audio .op-settings {
     bottom: 32px;
     right: 0;