Добавил блок для адаптирующегося медиаконтента

projectConfig.json

@@ -54,7 +54,8 @@
     "modal": [],
     "close": [],
     "tabs": [],
-    "object-fit-polyfill": []
+    "object-fit-polyfill": [],
+    "embed-responsive": []
   },
   "addCssBefore": [
     "./src/scss/variables.scss",

src/blocks-demo.html

@@ -1418,7 +1418,7 @@
 
     </section>
 
-    <section class="blocks-library__item  blocks-library__item--menusep" id="media" data-name=".media">
+    <section class="blocks-library__item" id="media" data-name=".media">
 
       <h2 class="blocks-library__item-title">Медиа-компонент</h2>
 
@@ -1464,6 +1464,29 @@
 
     </section>
 
+    <section class="blocks-library__item  blocks-library__item--menusep" id="embed-responsive" data-name=".embed-responsive">
+
+      <h2 class="blocks-library__item-title">Адаптирующийся медиаконтент</h2>
+
+      <p>16/9 по умолчанию, 4/3 с модификатором.</p>
+
+      <div class="embed-responsive">
+        <iframe width="560" height="315" src="https://www.youtube.com/embed/HNpLuXOg7xQ" frameborder="0" allowfullscreen></iframe>
+      </div>
+
+      <div class="blocks-library__code-wrapper">
+        <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
+        <div class="blocks-library__code">
+          <pre class="code">
+            <code>&lt;div class="embed-responsive  embed-responsive--16-9"></code>
+            <code>  &lt;iframe ...>&lt;/iframe></code>
+            <code>&lt;/div></code>
+          </pre>
+        </div>
+      </div>
+
+    </section>
+
 
 
 

src/blocks/embed-responsive/embed-responsive.html

+<!--DEV
+
+Для использования этого файла как шаблона:
+
+@ @include('blocks/embed-responsive/embed-responsive.html')
+
+(Нужно убрать пробел между символами @)
+Подробнее: https://www.npmjs.com/package/gulp-file-include
+
+-->
+
+<div class="embed-responsive  embed-responsive--16-9">
+  <iframe src="https://www.youtube.com/embed/HNpLuXOg7xQ" frameborder="0" allowfullscreen></iframe>
+</div>

src/blocks/embed-responsive/embed-responsive.scss

+// В этом файле должны быть стили только для БЭМ-блока embed-responsive, его элементов,
+// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
+// Не пишите здесь другие селекторы.
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    display: block;
+    padding-top: percentage(9 / 16);
+  }
+
+  // embed,
+  // object,
+  iframe,
+  video {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+
+
+
+  &--4-3 {
+
+    &::before {
+      padding-top: percentage(3 / 4);
+    }
+  }
+}