diff --git a/src/page/basics/video/video.scss b/src/page/basics/video/video.scss index 74feaa7..76a9c57 100644 --- a/src/page/basics/video/video.scss +++ b/src/page/basics/video/video.scss @@ -5,11 +5,6 @@ @include square(var(--large-icon-size)); @include absolute-center; visibility: hidden; - - & > svg { - @include square(var(--large-icon-size)); - @include absolute-center; - } } video { @@ -21,7 +16,7 @@ z-index: 1; } - &.loaded .loading { + &.loaded:not(.fully-loaded) .loading { visibility: visible; } diff --git a/src/page/basics/video/video.ts b/src/page/basics/video/video.ts index 2dd5ac9..4dc29a9 100644 --- a/src/page/basics/video/video.ts +++ b/src/page/basics/video/video.ts @@ -10,28 +10,27 @@ export class Video extends PageElement { super(createElement(generate(options))); this.video = this.query('video') as HTMLVideoElement; this.video.addEventListener('click', this.startVideo.bind(this)); + this.video.addEventListener('play', () => this.htmlRoot.classList.add('fully-loaded') ); this.query('.start-button').addEventListener('click', this.startVideo.bind(this)); - this.video.addEventListener('pause', this.stopVideo.bind(this)); + this.video.addEventListener('pause', this.pauseVideo.bind(this)); } - private startVideo(e: Event) { + private startVideo() { if (this.video.paused) { this.query('.start-button').style.visibility = 'hidden'; this.htmlRoot.classList.add('loaded'); this.video.play(); this.video.controls = true; - e.preventDefault(); } } - private stopVideo(e: Event) { + private pauseVideo() { if (this.video.paused) { this.query('.start-button').style.visibility = 'visible'; this.video.controls = false; - e.preventDefault(); } } }