Default
Include a title, caption, duration pill, and action bar. The action bar contains an expand button, which opens the video into an immersive view.
<div class="comet-embedded">
<div class="comet-embedded__media comet-embedded__video">
<div class="comet-embedded__video-container video-container video-js vjs-default-skin"></div>
<span class="comet-pill comet-embedded__pill--duration comet-pill--overlay">2:34</span>
<div class="comet-embedded__overlay">
<div class="comet-embedded_action-bar">
<a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/34567">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
</svg>
</a>
<a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
</svg>
</a>
<a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
</svg>
</a>
</div>
<a class="comet-embedded__play-button" href="#">
<svg class="comet-embedded__play-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#play"></use>
</svg>
<span class="comet-screenreader-only">Play</span>
</a>
</div>
<img class="comet-embedded__full-image" src="/images/components/embedded-video/34567.jpeg" alt="">
</div>
<div class="comet-embedded__copy">
<a class="comet-embedded__link-title" href="/player/view/assetguid/34567">
<h5 class="comet-embedded__title">Volcanoes</h5>
</a>
<figcaption class="comet-embedded__caption">Volcanoes are just one of the visible effects of invisible forces under Earth’s surface. Where does the power of volcanic eruptions come from?</figcaption>
</div>
</div>
{{ comet.embedded_video(
guid="34567",
title="Volcanoes",
caption="Volcanoes are just one of the visible effects of invisible forces under Earth’s surface. Where does the power of volcanic eruptions come from?",
duration="2:34"
)}}
Macro params reference
With Status
Display a pill (such as “New”) to highlight a unique video status.
<div class="comet-embedded">
<div class="comet-embedded__media comet-embedded__video">
<div class="comet-embedded__video-container video-container video-js vjs-default-skin"></div>
<span class="comet-pill comet-embedded__pill--duration comet-pill--overlay">5:18</span>
<div class="comet-embedded__overlay">
<div class="comet-embedded_action-bar">
<a class="comet-embedded_action-bar__item" title="Expand" href="/player/view/assetguid/12345">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#expand"></use>
</svg>
</a>
<a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
</svg>
</a>
<a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
</svg>
</a>
</div>
<a class="comet-embedded__play-button" href="#">
<svg class="comet-embedded__play-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#play"></use>
</svg>
<span class="comet-screenreader-only">Play</span>
</a>
</div>
<img class="comet-embedded__full-image" src="/images/components/embedded-video/12345.jpeg" alt="">
</div>
<div class="comet-embedded__copy">
<span class="comet-pill comet-pill--new comet-embedded__pill--new">New</span>
<a class="comet-embedded__link-title" href="/player/view/assetguid/12345">
<h5 class="comet-embedded__title">Doggy Gets a Bath (Why Not Kitty, Too?)</h5>
</a>
<figcaption class="comet-embedded__caption">Two children decide that their kitten needs a bath.</figcaption>
</div>
</div>
{{ comet.embedded_video(
guid="12345",
title="Doggy Gets a Bath (Why Not Kitty, Too?)",
caption="Two children decide that their kitten needs a bath.",
new="true",
duration="5:18"
)}}
Macro params reference
Static
Display video player on page without expanding to a separate view by omitting the expand button.
<div class="comet-embedded">
<div class="comet-embedded__media comet-embedded__video">
<div class="comet-embedded__video-container video-container video-js vjs-default-skin"></div>
<span class="comet-pill comet-embedded__pill--duration comet-pill--overlay">6:59</span>
<div class="comet-embedded__overlay">
<div class="comet-embedded_action-bar">
<a class="comet-embedded_action-bar__item" title="Add to Quicklist" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#plus"></use>
</svg>
</a>
<a class="comet-embedded_action-bar__item" title="More Actions" href="javascript:(0)">
<svg class="comet-embedded_action-bar__icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#ellipsis"></use>
</svg>
</a>
</div>
<a class="comet-embedded__play-button" href="#">
<svg class="comet-embedded__play-icon" aria-hidden="true" focusable="false">
<use xlink:href="/comet/comet_assets/comet.svg#play"></use>
</svg>
<span class="comet-screenreader-only">Play</span>
</a>
</div>
<img class="comet-embedded__full-image" src="/images/components/embedded-video/23456.jpeg" alt="">
</div>
<div class="comet-embedded__copy">
<h5 class="comet-embedded__title">Puppy Socializing</h5>
<figcaption class="comet-embedded__caption">A retired guide dog teaches new puppies how to behave correctly.</figcaption>
</div>
</div>
{{ comet.embedded_video(
guid="23456",
title="Puppy Socializing",
caption="A retired guide dog teaches new puppies how to behave correctly.",
duration="6:59",
expandable=false
)}}
Macro params reference
##Guidelines
- Display video length in
hh:mm:ss
. - Trigger a video playing and replace video thumbnail by clicking the button overlay.
- Expand to an immersive view by clicking either the title or expand button.
##Class Reference
Class | Applies to | Outcome |
---|---|---|
|
|
Applies to span hidden unless viewed on screen reader (fallback for SVG icon). |
|
|
Applies absolute positioning for semi-transparent pill, and sets it to the top left corner. |
|
|
Displays image thumbnail to fit in parent row or columns full width. |
|
|
Placeholder to contain javascript video player |
Macro Params Reference
Embedded Image
Param | Values | Description |
---|---|---|
guid |
video's guid |
Guid associated with video to be displayed |
href |
path/to/expanded/view |
Sets path to expanded view, combines with guid to create link to expanded video |
src |
path/to/image/directory |
Sets path to video’s thumbnail image directory, combines with guid to create thumbnail URL |
title |
false (default) or string |
Sets the title |
caption |
false (default) or string |
Sets the caption |
new |
false (default) or true |
Displays new pill |
expandable |
true (default) or false |
Setting to false removes the expand control and link from title |