From 88c5dc58c2ee698957fd22dad7ce12a3dd766734 Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Tue, 27 Sep 2022 19:26:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=92=AD=E6=94=BEyoutube?=
 =?UTF-8?q?=E8=A7=86=E9=A2=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/desktop/css/main.css  | 10 +++++++
 src/desktop/gameplay.html | 50 ++++++++++++++++++++++++++++++++--
 src/mobile/gamePlay.html  | 57 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 114 insertions(+), 3 deletions(-)

diff --git a/src/desktop/css/main.css b/src/desktop/css/main.css
index 2eea3c4..5a947e9 100755
--- a/src/desktop/css/main.css
+++ b/src/desktop/css/main.css
@@ -417,6 +417,11 @@ span.swiper-pagination-bullet {
 .gameplay-video {
 	width: 80%;
 	margin: 7% auto 0px;
+	position: relative;
+	height: 900px;
+}
+#video-frame{
+	display: none;
 }
 .gameplay-video img{
 	width:100%;
@@ -764,6 +769,11 @@ span.swiper-pagination-bullet {
 .hero-d-layer-inner::-webkit-scrollbar{
 	width: 0;
 }
+.video-mask{
+	position: absolute;
+	top: 0;
+	left: 0;
+}
 
 .hero-d-layer-con {
 	background: url('../img/nft/hero/herodbg@2x.png') no-repeat center top;
diff --git a/src/desktop/gameplay.html b/src/desktop/gameplay.html
index 407ab07..6e2915d 100755
--- a/src/desktop/gameplay.html
+++ b/src/desktop/gameplay.html
@@ -52,8 +52,9 @@
             Logout
           </a>
         </div>
-        <div class="gameplay-video">
-          <img src="img/game play/video@2x.png" />
+        <div class="gameplay-video" id="gameVideo">
+          <div id="youtube-video"></div>
+          <!-- <img src="img/game play/video@2x.png" class="video-mask" /> -->
         </div>
       </section>
       <section class="content gameplay-content">
@@ -228,5 +229,50 @@
     <script type="text/javascript" src="./js/pixelRatio.js"></script>
     <script type="text/javascript" src="./js/jcchain.js"></script>
     <script type="text/javascript" src="./js/main.js"></script>
+    <script>
+      $('#gameVideo').click(function () {
+        $('.video-mask').hide()
+        $('#video-frame').show()
+      })
+      var tag = document.createElement('script')
+
+      tag.src = 'https://www.youtube.com/iframe_api'
+      var firstScriptTag = document.getElementsByTagName('script')[0]
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
+
+      // 3. This function creates an <iframe> (and YouTube player)
+      //    after the API code downloads.
+      var player
+      function onYouTubeIframeAPIReady() {
+        player = new YT.Player('youtube-video', {
+          height: '908',
+          width: '1548',
+          videoId: 'od1HDpyMHG0',
+          events: {
+            onReady: onPlayerReady,
+            onStateChange: onPlayerStateChange,
+          },
+        })
+      }
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+        event.target.playVideo()
+      }
+
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      var done = false
+      function onPlayerStateChange(event) {
+        if (event.data == YT.PlayerState.PLAYING && !done) {
+          setTimeout(stopVideo, 6000)
+          done = true
+        }
+      }
+      function stopVideo() {
+        player.stopVideo()
+      }
+    </script>
   </body>
 </html>
diff --git a/src/mobile/gamePlay.html b/src/mobile/gamePlay.html
index dc79d2f..d4924a2 100755
--- a/src/mobile/gamePlay.html
+++ b/src/mobile/gamePlay.html
@@ -56,7 +56,12 @@
           </a>
         </div>
         <div class="gameplay-video">
-          <img src="imgMobile/game play/gpyj@2x.png" width="100%" />
+          <div id="youtube-video" />
+          <img
+            src="imgMobile/game play/gpyj@2x.png"
+            id="videoMask"
+            width="100%"
+          />
         </div>
       </section>
       <section class="gameplay-content">
@@ -234,5 +239,55 @@
     <script type="text/javascript" src="./js/main.js"></script>
     <script type="text/javascript" src="./js/jcchain.js"></script>
     <script type="text/javascript" src="./js/chain.js"></script>
+    <script>
+      // $('#gameVideo').click(function () {
+      //   $('.video-mask').hide()
+      //   $('#video-frame').show()
+      // })
+
+      let width = $('#videoMask').width()
+      let height = $('#videoMask').height()
+      console.log(width, height)
+      var tag = document.createElement('script')
+
+      tag.src = 'https://www.youtube.com/iframe_api'
+      var firstScriptTag = document.getElementsByTagName('script')[0]
+      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag)
+
+      // 3. This function creates an <iframe> (and YouTube player)
+      //    after the API code downloads.
+      var player
+      function onYouTubeIframeAPIReady() {
+        player = new YT.Player('youtube-video', {
+          height: height,
+          width: width,
+          videoId: 'od1HDpyMHG0',
+          events: {
+            onReady: onPlayerReady,
+            onStateChange: onPlayerStateChange,
+          },
+        })
+      }
+
+      // 4. The API will call this function when the video player is ready.
+      function onPlayerReady(event) {
+        $('#videoMask').hide()
+        event.target.playVideo()
+      }
+
+      // 5. The API calls this function when the player's state changes.
+      //    The function indicates that when playing a video (state=1),
+      //    the player should play for six seconds and then stop.
+      var done = false
+      function onPlayerStateChange(event) {
+        if (event.data == YT.PlayerState.PLAYING && !done) {
+          setTimeout(stopVideo, 6000)
+          done = true
+        }
+      }
+      function stopVideo() {
+        player.stopVideo()
+      }
+    </script>
   </body>
 </html>