diff --git a/public/index.html b/public/index.html
index 873b56c..69b6d5f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,6 @@
html * {font-family: 'Rajdhani',serif;font-weight: bold;}
body{overflow-x: hidden;scrollbar-width: none;}
::-webkit-scrollbar {width: 0 !important;height: 0;display: none;}
- .video-youtube-202202 iframe{margin-top: -110px;}
.video-youtube-202202.mobile iframe{margin-top: -9vw;}
diff --git a/src/components/gameplay/VideoSection.vue b/src/components/gameplay/VideoSection.vue
index 8deb596..9073c21 100644
--- a/src/components/gameplay/VideoSection.vue
+++ b/src/components/gameplay/VideoSection.vue
@@ -2,7 +2,7 @@
-

+
@@ -32,8 +33,9 @@ import Youtube, { YouTubePlayer } from 'vue-youtube-embed'
export default class extends Vue {
private videoShow = false
private videoPlayer: any
- private videoWidth = 1280
- private videoHeight = 720
+ private videoWidth = 888
+ private videoHeight = 500
+ private playing = false
private playerVars = {
autoplay: 0,
mute: 1,
@@ -47,10 +49,11 @@ export default class extends Vue {
mounted() {
// {375, 146}
+ // 640 x 360
const winWidth = window.innerWidth
const mHeight = 211 * (winWidth / 375)
- this.videoWidth = this.mobile ? winWidth : 1280
- this.videoHeight = this.mobile ? mHeight : 720
+ this.videoWidth = this.mobile ? winWidth : 888
+ this.videoHeight = this.mobile ? mHeight : 500
}
get mobile() {
@@ -64,6 +67,10 @@ export default class extends Vue {
// event.target.playVideo()
}
+ videoPlaying(event: any) {
+ this.playing = true
+ }
+
videoEnded(event: any) {
console.log('video end')
event.target.mute()
@@ -113,9 +120,15 @@ export default class extends Vue {
top:0;
right: 0;
filter: brightness(0.5);
+ //overflow: hidden;
&:hover {
filter: brightness(1);
}
+ img{
+ &.blur{
+ filter: blur(20px);
+ }
+ }
}
.play-btn{
position: absolute;
@@ -133,7 +146,7 @@ export default class extends Vue {
cursor: pointer;
}
.video-youtube-202202{
- width: 1280px;
+ width: 888px;
height: 500px;
margin: auto;
position: absolute;