fix iframe, thumbnails

apps/course/templates/course/content/gallery.html

@@ -5,8 +5,8 @@
     {% for image in course.gallery.gallery_images.all %}
       <div class="examples__item">
         <a href="{{ image.img.image.url }}">
-          {% thumbnail image.img.image "140x140" crop="center" as im %}
-            <img class="examples__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+          {% thumbnail image.img.image "165x165" crop="center" as im %}
+            <img class="examples__pic" src="{{ im.url }}">
           {% endthumbnail %}
         </a>
       </div>
@@ -20,8 +20,8 @@
         {% for image in content.gallery_images.all %}
           <div class="examples__item">
             <a href="{{ image.img.image.url }}">
-              {% thumbnail image.img.image "140x140" crop="center" as im %}
-                <img class="examples__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
+              {% thumbnail image.img.image "165x165" crop="center" as im %}
+                <img class="examples__pic" src="{{ im.url }}">
               {% endthumbnail %}
             </a>
           </div>

apps/course/templates/course/content/video.html

@@ -3,15 +3,41 @@
     <div class="content-block title">
       {{ content.title }}
     </div>
-    <div>
+    <div class="iframe__container">
       {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
-      <iframe width="640" height="360" src="https://www.youtube.com/embed/{{ content.video_index }}" frameborder="0" allow="autoplay; encrypted-media"
+      <iframe src="https://www.youtube.com/embed/{{ content.video_index }}" frameborder="0" allow="autoplay; encrypted-media"
         allowfullscreen></iframe>
       {% elif 'vimeo.com' in content.url %}
-      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" width="640" height="360" frameborder="0" webkitallowfullscreen
+      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
         mozallowfullscreen allowfullscreen>
       </iframe>
       {% endif %}
     </div>
   </div>
-</div>
+</div>
+
+<style>
+  @media only screen and (max-width: 639px) {
+    iframe {
+      width: 100%;
+      height: 240px;
+    }
+
+    .iframe__container {
+      text-align: center;
+      width: 100%;
+      padding-bottom: 56.25%;
+      margin-bottom: -56.25%;
+    }
+  }
+
+  @media only screen and (min-width: 640px) {
+    .iframe__container {
+      text-align: center;
+    }
+    iframe {
+      width: 640px;
+      height: 360px;
+    }
+  }
+</style>

web/src/sass/_common.sass

@@ -2752,7 +2752,11 @@ a.grey-link
       flex: 0 0 calc(33.33% - 10px)
   &__pic
     display: block
-    width: 100%
+    width: 165px
+    height: 165px
+    +s
+      width: 160px
+      height: 160px
 
 .questions
   &__anchor