feat(media/embed): preset or custom ratio with nested item or iframe …

…(incl. variations) macros + demo + docs

README.md

@@ -26,6 +26,7 @@ You can [view the demos of all available modules](https://jbmoelker.github.io/nu
 
 * **media**
   * [carousel](https://jbmoelker.github.io/nunjucks-bootstrap/#media/carousel/carousel.demo.html)
+  * [embed](https://jbmoelker.github.io/nunjucks-bootstrap/#media/embed/embed.demo.html)
   * [figure](https://jbmoelker.github.io/nunjucks-bootstrap/#media/figure/figure.demo.html)
   * [image](https://jbmoelker.github.io/nunjucks-bootstrap/#media/image/image.demo.html)
 * **nav**

src/media/embed/README.md

@@ -0,0 +1,70 @@
+# Embed
+
+## Functionality
+
+> Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.
+>
+> -- [Bootstrap > Responsive embeds](http://v4-alpha.getbootstrap.com/components/utilities/#responsive-embeds)
+
+## Usage
+
+Import the macros:
+
+```html
+{% import "media/embed/embed.html" as embed %}
+```
+
+Wrap content in a fixed ratio (preset or custom) element:
+
+```html
+{% call embed.ratio16by9() %}
+    <div class="embed-responsive-item">content</div>
+{% endcall %}
+```
+
+Optionally use `item()` or `iframe()` helper to create content.
+
+### `.ratio21by9()`, `.ratio16by9()`, `.ratio4by3()`, `.ratio1by1()`
+
+Creates an element with a fixed aspect ratio.
+
+Use as [`call` block](http://mozilla.github.io/nunjucks/templating.html#call).
+Content inside block is displayed inside the element.
+
+### `.ratio()`
+
+Creates an element with a custom aspect ratio.
+
+Use as [`call` block](http://mozilla.github.io/nunjucks/templating.html#call).
+Content inside block is displayed inside the element.
+
+index | parameter | type | description
+--- | --- | --- | ---
+0 | ratio | number | Aspect ratio (width:height) as number (between 0 and 1). E.g. `.4` or `2/1`.
+
+### `.sizes()`
+
+Creates an element with a custom aspect ratio based on the given width and height.
+
+Use as [`call` block](http://mozilla.github.io/nunjucks/templating.html#call).
+Content inside block is displayed inside the element.
+
+index | parameter | type | description
+--- | --- | --- | ---
+0 | width | number | Relative to height. Used to calculate aspect ratio. E.g. `width = 640`.
+1 | height | number | Relative to width. Used to calculate aspect ratio. E.g. `height = 400`.
+
+### `.item()`
+
+Creates an item which takes the full with and height of the parent element.
+
+Use as [`call` block](http://mozilla.github.io/nunjucks/templating.html#call).
+Content inside block is displayed inside the item.
+
+### `.iframe()`
+
+Creates an iframe which takes the full with and height of the parent element.
+
+index | parameter | type | description
+--- | --- | --- | ---
+0 | src | string | Url of the source.

src/media/embed/embed.demo.html

@@ -0,0 +1,47 @@
+{% extends "demo/module/module.html" %}
+{% import "./embed.html" as embed %}
+
+{% block content %}
+    <demo aria-label="Responsive embed - preset ratio 21:9">
+        {% call embed.ratio21by9() %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed - preset ratio 16:9">
+        {% call embed.ratio16by9() %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed - preset ratio 4:3">
+        {% call embed.ratio4by3() %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed - preset ratio 1:1">
+        {% call embed.ratio1by1() %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed - custom ratio (e.g. ratio = 2/1)">
+        {% call embed.ratio(2/1) %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed - custom sizes (e.g. width = 2, height = 1)">
+        {% call embed.sizes(2, 1) %}
+            <div class="embed-responsive-item" style="background:#CCC;">content</div>
+        {% endcall %}
+    </demo>
+
+    <demo aria-label="Responsive embed iframe">
+        {% call embed.ratio16by9() %}
+            {{ embed.iframe('https://www.youtube.com/embed/zpOULjyy-n8?rel=0') }}
+        {% endcall %}
+    </demo>
+
+{% endblock %}

src/media/embed/embed.html

@@ -0,0 +1,31 @@
+{%- macro ratio21by9() -%}
+    <div class="embed-responsive embed-responsive-21by9">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro ratio16by9() -%}
+    <div class="embed-responsive embed-responsive-16by9">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro ratio4by3() -%}
+    <div class="embed-responsive embed-responsive-4by3">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro ratio1by1() -%}
+    <div class="embed-responsive embed-responsive-1by1">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro ratio(ratio) -%}
+    <div class="embed-responsive" style="padding-bottom:{{ 100 / ratio }}%">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro sizes(width, height) -%}
+    {{ ratio(width/height) }}
+{%- endmacro -%}
+
+{%- macro item() -%}
+    <div class="embed-responsive-item">{{ caller() }}</div>
+{%- endmacro -%}
+
+{%- macro iframe(src) -%}
+    <iframe class="embed-responsive-item" src="{{ src }}" allowfullscreen></iframe>
+{%- endmacro -%}