Skip to main content Skip to navigation
View Navigation Comet

Embedded Videos

Display annotated video assets with interactive controls.

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.

2:34
Play
Volcanoes
Volcanoes are just one of the visible effects of invisible forces under Earth’s surface. Where does the power of volcanic eruptions come from?
Copy to Clipboard Press Ctrl + C to copy 
<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>
Copy to Clipboard Press Ctrl + C to copy 
{{ 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.

5:18
Play
New
Doggy Gets a Bath (Why Not Kitty, Too?)
Two children decide that their kitten needs a bath.
Copy to Clipboard Press Ctrl + C to copy 
<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>
Copy to Clipboard Press Ctrl + C to copy 
{{ 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.

6:59
Play
Puppy Socializing
A retired guide dog teaches new puppies how to behave correctly.
Copy to Clipboard Press Ctrl + C to copy 
<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>
Copy to Clipboard Press Ctrl + C to copy 
{{ 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

.comet-screenreader-only

<span>

Applies to span hidden unless viewed on screen reader (fallback for SVG icon).

.comet-embedded__pill--duration

<div>

Applies absolute positioning for semi-transparent pill, and sets it to the top left corner.

.comet-embedded__full-image

<img>

Displays image thumbnail to fit in parent row or columns full width.

.comet-embedded__video-container.video-container

<div>, <video>

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

Copyright © 2018 Discovery Education. All rights reserved. Discovery Education is a subsidiary of Discovery Communications, LLC.

Jump to page content
Navigation Menu

Comet

v2.44.1