diff --git a/css/amp.css b/css/amp.css index e20d5cc238b68..002c40c99ca19 100644 --- a/css/amp.css +++ b/css/amp.css @@ -708,6 +708,16 @@ i-amphtml-video-mask, i-amp-video-mask { margin: initial !important; } +i-amphtml-dockable-video-control-btn { + flex-grow: 1; + font-size: 40px; + color: white; +} + +i-amphtml-dockable-video-control-btn.play { + +} + /** * amp-accordion to avoid FOUC. */ diff --git a/src/service/video-manager-impl.js b/src/service/video-manager-impl.js index 988f5410a9f08..b2c878d52fe60 100644 --- a/src/service/video-manager-impl.js +++ b/src/service/video-manager-impl.js @@ -916,7 +916,6 @@ class VideoEntry { function cloneStyle(prop) { return st.getStyle(dev().assertElement(internalElement), prop); }; - st.setStyles(dev().assertElement(this.draggingMask_), { 'top': cloneStyle('top'), 'left': cloneStyle('left'), @@ -929,7 +928,10 @@ class VideoEntry { 'height': cloneStyle('height'), 'position': 'fixed', 'z-index': '17', - 'background': 'transparent', + 'background': 'rgba(0,0,0,0.4)', + 'display': 'flex', + 'align-items': 'center', + 'text-align': 'center', }); }); } @@ -1607,6 +1609,17 @@ class VideoEntry { createDraggingMask_() { const doc = this.ampdoc_.win.document; this.draggingMask_ = doc.createElement('i-amphtml-dragging-mask'); + const play_btn = doc.createElement('i-amphtml-dockable-video-control-btn'); + play_btn.classList.toggle('play', !this.isPlaying_); + play_btn.classList.toggle('pause', this.isPlaying_); + const mute_btn = doc.createElement('i-amphtml-dockable-video-control-btn'); + mute_btn.classList.toggle('mute', !this.muted_); + mute_btn.classList.toggle('unmute', this.muted_); + const fs_btn = doc.createElement('i-amphtml-dockable-video-control-btn'); + fs_btn.classList.add('fullscreen'); + this.draggingMask_.appendChild(play_btn); + this.draggingMask_.appendChild(mute_btn); + this.draggingMask_.appendChild(fs_btn); this.realignDraggingMask_(); this.video.element.appendChild(this.draggingMask_); }