template

video-feed.html

@@ -200,10 +200,9 @@
   <div class='wrapper'>
   {% for video in videos %}
       <div class='video-box'>
-          <div class='media'>
+          <div class='media' id='media-{{ video.id }}'>
-            <a class='video-thumbnail' href="{{ host }}/videos/watch/{{ video.uuid }}">
+            <span class='video-thumbnail' id='thumb-{{ video.id }}' onclick="loadPlayer('{{ video.id }}', '{{ host }}{{ video.embed_path }}')" href="{{ host }}/videos/watch/{{ video.uuid }}">
               <img src="{{ host }}{{ video.preview_path }}">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ host }}{{ video.embed_path }}" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               {% if video.is_live %}
               LIVE
@@ -218,11 +217,11 @@
           </div>
           <div class='metadata'>
             <div class='title'>{{ video.name }}</div>
-            <span class="description collapsed" id='vid-{{ video.id }}'> {{ video.description | linebreaks }}</span>
+            <span class="description collapsed" id='meta-{{ video.id }}'> {{ video.description | linebreaks }}</span>
             <div class='footer'>
               <span class='channel'><a href='{{ video.channel.url }}'> {{ video.channel.display_name }}</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-{{ video.id }}')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-{{ video.id }}')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='{{ host }}/videos/watch/{{ video.uuid }}'> {{ video.published_at.strftime('%Y-%m-%d') }}</a></span>
             </div>
@@ -236,5 +235,17 @@
   function toggleDescription(id){
     document.querySelector(id).classList.toggle("collapsed");
   }
+  function loadPlayer(id, embed_path){
+    media = document.querySelector('#media-'+ id)
+
+    var iframe = document.createElement('iframe');
+    iframe.src = embed_path + '?autoplay=1&title=0'
+    iframe.width = 560;
+    iframe.height = 315;
+    iframe.frameBorder = 0;
+    iframe.sandbox = "allow-same-origin allow-scripts allow-popups" 
+    media.appendChild(iframe)
+    document.querySelector('#thumb-'+ id).remove()
+  }
 </script>
-</html>
+</html>