попап в конце видео

apps/content/models.py

@@ -99,7 +99,7 @@ class Video(Content):
     url = models.URLField('Ссылка')
 
     def video_index(self):
-        if 'youtu.be' in self.url or 'youtube.com' in self.url and 'watch' in self.url:
+        if self.is_youtube_video:
             url = urlparse(self.url)
             query = url.query.split('&')
             for q in query:
@@ -107,6 +107,14 @@ class Video(Content):
                     return q.split('=')[-1]
         return self.url.split('/')[-1]
 
+    @property
+    def is_youtube_video(self):
+        return 'youtu.be' in self.url or 'youtube.com' in self.url and 'watch' in self.url
+
+    @property
+    def is_vimeo_video(self):
+        return 'vimeo.com' in self.url
+
 
 class Gallery(Content):
     pass

apps/content/templates/content/blocks/video.html

@@ -4,12 +4,12 @@
       {{ content.title }}
     </div>
     <div class="content-block__video iframe__container">
-      {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
+      {% if content.is_youtube_video %}
-      <iframe src="https://www.youtube.com/embed/{{ content.video_index }}" frameborder="0" allow="autoplay; encrypted-media"
+      <iframe class="js-content-video" data-is-youtube="1" src="https://www.youtube.com/embed/{{ content.video_index }}"
-        webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+              frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
-      {% elif 'vimeo.com' in content.url %}
+      {% elif content.is_vimeo_video %}
-      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
+      <iframe class="js-content-video" data-is-vimeo="1" src="https://player.vimeo.com/video/{{ content.video_index }}"
-        mozallowfullscreen allowfullscreen>
+              frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
       </iframe>
       {% endif %}
     </div>

apps/school/templates/school/livelesson_detail.html

@@ -33,6 +33,10 @@
                 width="720" height="400"
                 webkitallowfullscreen mozallowfullscreen allowfullscreen>
         </iframe>
+        <div id="popup_video" style="position: absolute; background: white; width: 200px; height: 200px; top: 0; left: 0; display: none;">
+          testtest testtest testtest testtest testtest testtest
+        </div>
+        {% include 'templates/blocks/popup_school_lesson_ended.html' %}
         <span>Если видео не загрузилось, - уменьшите качество видео или <a href="#" onclick="location.reload();">обновите страницу</a></span>
         <!--<iframe class="lesson__chat_frame" src="https://vimeo.com/live-chat/{{ livelesson.stream_index }}" frameborder="0"></iframe>-->
         <comments obj-type="live-lesson" obj-id="{{ livelesson.id }}" :is-chat="true"></comments>
@@ -60,12 +64,13 @@
 {% endblock content %}
 
 {% block foot %}
+<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
   {% if livelesson.stream_index %}
   <script>
     var iframe = document.querySelector('iframe.lesson__video_frame');
     var player = new Vimeo.Player(iframe);
     player.on('ended', function() {
-      console.log('vimeo player: ended', arguments[0]);
+      console.log('vimeo player: ended', arguments);
     });
     player.on('error', function() {
       console.log('vimeo player: error', arguments[0]);
@@ -79,8 +84,11 @@
     player.on('play', function() {
       console.log('vimeo player: play', arguments[0]);
     });
-    player.on('pause', function() {
+    player.on('pause', function(data) {
       console.log('vimeo player: pause', arguments[0]);
+      if(data.percent == 1){
+        //
+      }
     });
     player.play().catch(e => console.log(e));
   </script>

project/templates/blocks/popup_school_lesson_ended.html

@@ -0,0 +1,15 @@
+{% load static %}
+<div class="popup video-ended js-popup-video-ended" data-manual-close="1">
+    <div class="popup__wrap popup__wrap_md js-popup-wrap">
+        <button class="popup__close js-popup-close">
+            <svg class="icon icon-close">
+                <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
+            </svg>
+        </button>
+        <div class="popup__body video-ended__body">
+          <div>
+            Отправь другу реферальную ссылку, пригласи учиться вместе и получи лилики на свой бонусный счёт!
+          </div>
+        </div>
+    </div>
+</div>