CBP UI Library

Video: Embed 

<figure class="figure">
    <div class="videoWrapper">
        <!-- Copy & Pasted from YouTube -->
        <iframe width="560" height="315" src="https://www.youtube.com/embed/12ka_ZWRdqA" title="Romy and Michele's High School Reunion - Dance Scene" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <figcaption class="figure__caption"><strong>Song:</strong> Time After Time<br><strong>Artist:</strong> Cyndi Lauper</figcaption>
</figure>

<link media="all" rel="stylesheet" href="/video/video.css" />
<script src="/video/video.js"></script>
 
<figure class="figure">
  <div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="{{ width }}"
            height="{{ height }}"
            src="{{ embedUrl }}"
            title="{{ title }}"
            frameborder="0"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
    ></iframe>
  </div>
  {% 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": 560,
  "height": 315,
  "caption": "<strong>Song:</strong> Time After Time<br><strong>Artist:</strong> Cyndi Lauper"
}
  • Content: 
    .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);
}
  • URL: /components/raw/video/video.scss
  • Filesystem Path: src/components/video/video.scss
  • Size: 280 Bytes

Use --aspect-ratio custom variable to control the aspect ratio. Default is 16/9

<div class="videoWrapper" style="--aspect-ratio: 3 / 4;"></div>