LIL-634 Маленький размер фрейма Вимео

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

@@ -1,43 +1,43 @@
-<div class="section section_border">
+<div class="section section_border">
-  <div class="section__center center center_sm">
+  <div class="section__center center center_sm">
-    <div class="content-block title">
+    <div class="content-block title">
-      {{ content.title }}
+      {{ content.title }}
-    </div>
+    </div>
-    <div class="iframe__container">
+    <div class="content-block__video iframe__container">
-      {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
+      {% if 'youtube.com' in content.url or 'youtu.be' in content.url %}
-      <iframe 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>
+        allowfullscreen></iframe>
-      {% elif 'vimeo.com' in content.url %}
+      {% elif 'vimeo.com' in content.url %}
-      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
+      <iframe src="https://player.vimeo.com/video/{{ content.video_index }}" frameborder="0" webkitallowfullscreen
-        mozallowfullscreen allowfullscreen>
+        mozallowfullscreen allowfullscree>
-      </iframe>
+      </iframe>
-      {% endif %}
+      {% endif %}
-    </div>
+    </div>
-  </div>
+  </div>
-</div>
+</div>
-
+
-<style>
+<style>
-  @media only screen and (max-width: 639px) {
+  @media only screen and (max-width: 639px) {
-    iframe {
+    iframe {
-      width: 100%;
+      width: 100%;
-      height: 240px;
+      height: 240px;
-    }
+    }
-
+
-    .iframe__container {
+    .iframe__container {
-      text-align: center;
+      text-align: center;
-      width: 100%;
+      width: 100%;
-      padding-bottom: 56.25%;
+      padding-bottom: 56.25%;
-      margin-bottom: -56.25%;
+      margin-bottom: -56.25%;
-    }
+    }
-  }
+  }
-
+
-  @media only screen and (min-width: 640px) {
+  @media only screen and (min-width: 640px) {
-    .iframe__container {
+    .iframe__container {
-      text-align: center;
+      text-align: center;
-    }
+    }
-    iframe {
+    iframe {
-      width: 640px;
+      width: 640px;
-      height: 360px;
+      height: 360px;
-    }
+    }
-  }
+  }
-</style>
+</style>

web/src/sass/_common.sass

@@ -4097,6 +4097,12 @@ a
   &.pic
     position: relative
     width: 100%
+  &__video iframe
+    height: 360px;
+    width: 640px;
+    max-width: 100%;
+    max-height: 60%;
+
 
 .banner
   height: 140px
@@ -4167,3 +4173,5 @@ a
   border-left: 3px solid transparent
   border-radius: 50%
   animation: loading .6s infinite linear
+
+.iframe__container