Embed
The vf-embed
component can currently give two different aspect ratios by adding a class variant. You can also define a max-width for the embed if needed.
Nunjucks syntax
Depending on your environment you'll want to use render
or include
. As a rule of thumb: server-side use include
, precompiled browser use render
. If you're using vf-eleventy you should use include
.
Using include
You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include
is an abstraction of render
and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_16x9": true
}
%}
{% include "../path_to/vf-embed/vf-embed.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include
is not be available.
{% render '@vf-embed', {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_16x9": true
} %}
HTML
<div class="vf-embed vf-embed--16x9" style=""><iframe src="https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Nunjucks syntax
Depending on your environment you'll want to use render
or include
. As a rule of thumb: server-side use include
, precompiled browser use render
. If you're using vf-eleventy you should use include
.
Using include
You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include
is an abstraction of render
and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_4x3": true
}
%}
{% include "../path_to/vf-embed/vf-embed.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include
is not be available.
{% render '@vf-embed', {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_4x3": true
} %}
HTML
<div class="vf-embed vf-embed--4x3" style=""><iframe src="https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Nunjucks syntax
Depending on your environment you'll want to use render
or include
. As a rule of thumb: server-side use include
, precompiled browser use render
. If you're using vf-eleventy you should use include
.
Using include
You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include
is an abstraction of render
and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_16x9": true,
"vf_embed_max_width": "480px"
}
%}
{% include "../path_to/vf-embed/vf-embed.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include
is not be available.
{% render '@vf-embed', {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_16x9": true,
"vf_embed_max_width": "480px"
} %}
HTML
<div class="vf-embed vf-embed--16x9" style="--vf-embed-max-width: 480px;
"><iframe src="https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Nunjucks syntax
Depending on your environment you'll want to use render
or include
. As a rule of thumb: server-side use include
, precompiled browser use render
. If you're using vf-eleventy you should use include
.
Using include
You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include
is an abstraction of render
and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_custom": true,
"vf_embed_custom_ratio_X": 7,
"vf_embed_custom_ratio_Y": 2
}
%}
{% include "../path_to/vf-embed/vf-embed.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include
is not be available.
{% render '@vf-embed', {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_variant_custom": true,
"vf_embed_custom_ratio_X": 7,
"vf_embed_custom_ratio_Y": 2
} %}
HTML
<div class="vf-embed vf-embed--custom-ratio" style=" --vf-embed-custom-ratio-x: 7;
--vf-embed-custom-ratio-y: 2;"><iframe src="https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Nunjucks syntax
Depending on your environment you'll want to use render
or include
. As a rule of thumb: server-side use include
, precompiled browser use render
. If you're using vf-eleventy you should use include
.
Using include
You'll need to pass a context object from your code or Yaml file (exampe), as well as the path to the Nunjucks template. Nunjucks' include
is an abstraction of render
and provides some additional portability.
{% set context fromYourYamlFile %}
- or -
{% set context = {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_max_width": "600px",
"vf_embed_variant_custom": true,
"vf_embed_custom_ratio_X": 11,
"vf_embed_custom_ratio_Y": 4
}
%}
{% include "../path_to/vf-embed/vf-embed.njk" %}
Using render
This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include
is not be available.
{% render '@vf-embed', {
"component-type": "block",
"vf_embedded_content": "<iframe src=\"https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe>",
"vf_embed_max_width": "600px",
"vf_embed_variant_custom": true,
"vf_embed_custom_ratio_X": 11,
"vf_embed_custom_ratio_Y": 4
} %}
HTML
<div class="vf-embed vf-embed--custom-ratio" style="--vf-embed-max-width: 600px;
--vf-embed-custom-ratio-x: 11;
--vf-embed-custom-ratio-y: 4;"><iframe src="https://www.youtube.com/embed/nGNvYjYQaaQ?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
Usage
Nunjucks Props
To avoid any mistyping, forgetfulness, and to aid in future proofing the component. We are using 'pseudo props' in nunjucks to determine which CSS selectors to use. All props do nothing unless included in your data for the component.
Props available
vf_embed_max_width
: required a number and CSS unit to give vf-embed
as maximum width. This number is applied to the CSS custom property --vf-embed-max-width
.
vf_embed_variant_16x9
: if set to true (vf_embed_variant_16x9: true
) it will apply the class selector vf-embed--16x9
to vf-embed
.
vf_embed_variant_4x3
: if set to true (vf_embed_variant_4x3: true
) it will apply the class selector vf-embed--4x3
to vf-embed
.
vf_embed_variant_custom
: if set to true ('vf_embed_variant_custom: true') it will apply the class selector vf-embed--custom-ratio
to vf-embed
. When this is applied the two CSS custom properties --vf-embed-custom-ratio-x
and --vf-embed-custom-ratio-y
can be used to define the X and Y ratio.
Aspect Ratios
Aspect Ratios available are 16x9 and 4x3 or one defined using CSS custom properties.
Class Variants
vf-embed--16x9
for embedable content that is has an aspect ratio of 16x9.
vf-embed--4x3
for embedable content that is has an aspect ratio of 4x3.
vf-embed--custom-ratio
for embedable content that requires a unique aspect ratio.
Custom Ratios
If you use vf-embed--custom-ratio
you will need to set the X and Y ratio using CSS Custom Properties.
The CSS Custom Properties available when using vf-embed--custom-ratio
are:
--vf-embed-custom-ratio-x
for the X value.
--vf-embed-custom-ratio-y
for the Y value.
For example. If you need an aspect ratio of 11x6 your HTML output could look like:
<div class="vf-embed vf-embed--custom-ratio" style="--vf-embed-custom-ratio-x: 11; --vf-embed-custom-ratio-y: 6">
<!-- embedded content goes here -->
</div>
Max Width
You can also set a max width for the vf-emded
. If you do this in the nunjucks file with the key of maxWidth:
the nunjucks template will output an inline style onto the vf-embed
. You can add this however fits best your product (in the :root
, in a stylesheet, etc).
If you do not set a --vf-embed-max-width
value then the component is set to a maximum width of 100%
.
For example. If you need a vf-embed
with the aspect ratio of 16x9 but with a maximum width of 400px your HTML out could look like:
<div class="vf-embed vf-embed--16x9" style="--vf-embed-max-width: 400px">
<!-- embedded content goes here -->
</div>
Installation info
This repository is distributed with [npm][https://www.npmjs.com/]. After [installing npm][https://www.npmjs.com/get-npm] and yarn, you can install vf-embed
with this command.
$ yarn add --dev @visual-framework/vf-embed
JS
You should import this component in ./components/vf-component-rollup/scripts.js
or your other JS process:
import { vfcomponentName } from 'vf-embed/vf-embed';
// Or import directly
// import { vfcomponentName } from '../components/raw/vf-embed/vf-embed.js';
vfcomponentName(); // if needed, invoke it
Sass/CSS
If your component uses Sass:
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import "@visual-framework/vf-embed/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
Changelog
Changelog
1.0.23
- small change to cards on homepage
1.0.18
1.0.17
1.0.16
1.0.13
- dependency bump
- adds roamap and consultation docs
1.0.12
- design token documenation now lives in the component libary
1.0.7
1.0.6
- begin to make more pattern/boilerplate guidance
- minor templating updates
1.0.5
1.0.4
- uses vf-favicon
- adds meta attributes
1.0.3
- run
vf-component-assets:everything
on local dev
- remove reference to removed
/css/app.css
1.0.2
- Add 404
- Fix component CSS generation
1.0.1
- Also generate per-component CSS with
vf-css:generate-component-css
1.0.0
- Initial release to be used with vf-core 2.2.0
Assets
File system location: components/vf-embed