Decoupled video player from Vimeo (#1374)

Author: Jinjiang

Diff for: themes/vue/layout/index.ejs

@@ -82,7 +82,7 @@
 </div>
 
 <div id="video-modal" class="modal">
-  <div class="vimeo-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
+  <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
 </div>
 
 <script>

Diff for: themes/vue/source/js/common.js

@@ -144,16 +144,18 @@
   * Modal Video Player
   */
   function initVideoModal () {
-    if (typeof Vimeo === 'undefined') return
-
     var modalButton = document.getElementById('modal-player')
     var videoModal = document.getElementById('video-modal')
-    var iframe = document.querySelector('iframe');
-    var player = new Vimeo.Player(iframe);
+
+    if (!modalButton || !videoWrapper) {
+      return
+    }
+
+    var iframe = document.querySelector('iframe')
+    var player = new Vimeo.Player(iframe)
     var overlay = document.createElement('div')
         overlay.className = 'overlay'
 
-
     modalButton.addEventListener('click', function(event) {
       event.stopPropagation()
       videoModal.classList.toggle('open')