<figure class="figure responsiveMedia">
<video class="video figure__video responsiveMedia__media" width="900px" height="468px" style="--aspectRatio: 900/468;" autoplay controls loop muted poster="https://d18lev1ok5leia.cloudfront.net/chesapeakebay/images/_900x468_crop_center-center_none/march_19_20_1800-01.jpg">
<source src="https://d38c6ppuviqmfp.cloudfront.net/documents/mar_19_20_738-video02.mp4" type="video/mp4">
Your browser does not support the video tag. Download as a <a href="https://d38c6ppuviqmfp.cloudfront.net/documents/mar_19_20_738-video02.mp4">mp4 file</a> instead.
</video>
<figcaption class="figure__caption">Lead oceanographic technician Taylor Giordano guides the Annapolis buoy to its home, with a team including Seward and NOAA staff.</figcaption>
</figure>
<link media="all" rel="stylesheet" href="/video/video.css" />
<script src="/video/video.js"></script>
<figure class="figure responsiveMedia">
<video class="video figure__video responsiveMedia__media"
width="{{ width }}px"
height="{{ height }}px"
style="--aspectRatio: {{ width }}/{{ height }};"
autoplay
controls
loop
muted
poster="{{ poster }}">
{% set links = [] %}
{% for file in files %}
<source src="{{ file.url }}" type="{{ file.mime }}">
{# generate download link #}
{% set link = '<a href="'~file.url~'">'~file.extension~' file</a>' %}
{% set links = links|merge([link]) %}
{% endfor %}
Your browser does not support the video tag. Download as a {{ links|join(', ', ' or ')|raw }} instead.
</video>
{% if caption %}
<figcaption class="figure__caption">{{ caption }}</figcaption>
{% endif %}
</figure>
{% import "_macros.twig" as h %}
{{ h.componentAssets('video') }}
{
"containerClass": null,
"title": "Romy and Michele's High School Reunion - Dance Scene",
"embedUrl": "https://www.youtube.com/embed/12ka_ZWRdqA",
"width": 900,
"height": 468,
"caption": "Lead oceanographic technician Taylor Giordano guides the Annapolis buoy to its home, with a team including Seward and NOAA staff.",
"files": [
{
"url": "https://d38c6ppuviqmfp.cloudfront.net/documents/mar_19_20_738-video02.mp4",
"mime": "video/mp4",
"extension": "mp4"
}
],
"poster": "https://d18lev1ok5leia.cloudfront.net/chesapeakebay/images/_900x468_crop_center-center_none/march_19_20_1800-01.jpg"
}
import "./video.scss";
.videoWrapper {
position: relative;
padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
height: 0;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.video {
aspect-ratio: var(--aspectRatio);
}
Use --aspect-ratio custom variable to control the aspect ratio. Default is 16/9
<div class="videoWrapper" style="--aspect-ratio: 3 / 4;"></div>