Video

In progress

Video paragraph is used for displaying moving content and sound on the webpage. Video preview and videos appear in 16:9 ratio. The video paragraph can be added as a standalone paragraph on page or inside accordions, tabs or a 2-column paragraph.

There are options for showing a small video (as a separate paragraph or inside a 2-column layout, an accordion or tab) and a large video (as a separate paragraph).

# Examples

undefined
<hy-video
  video-title="Youtube test embed"
  video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
  context-label="Youtube test"
  views="123"
  views-label="Views"
  duration="1:23"
  duration-label="Duration"
  date-added="28.10.2020"
  date-added-label="Added"
>
  <iframe slot="video" src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque" frameborder="0"></iframe>
</hy-video>

undefined
<hy-video
  horizontal
  video-title="Youtube test embed"
  video-description="Video description for giving more context to what the user is viewing (eg. if the video is part of a lecture series, or a series of speeches). Can include links and probably needs to have a character limit."
  context-label="Youtube test"
  views="123"
  views-label="Views"
  duration="1:23"
  duration-label="Duration"
  date-added="28.10.2020"
  date-added-label="Added"
>
  <iframe slot="video" src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque" frameborder="0"></iframe>
</hy-video>

<hy-video
  context-label="Youtube test"
  play-button-visible
  context-label-visible
  play-button-label="Play video"
  link-to-video="https://www.google.com"
  preview-image-url="https://www.helsinki.fi/sites/default/files/styles/16_9_huge/public/kukkataedit_ja_-sedaet-6_0.jpg"
>
</hy-video>

undefined
<hy-video>
  <iframe slot="video" src="https://www.youtube.com/embed/Bsycp5I2Vy8?width=&height=&theme=dark&autoplay=0&vq=hd720&rel=0&showinfo=1&modestbranding=0&iv_load_policy=1&controls=1&autohide=2&wmode=opaque" frameborder="0"></iframe>
</hy-video>

# Properties

Property Attribute Description Type Default
contextLabel context-label Context label string undefined
contextLabelVisible context-label-visible Should context label be visible boolean false
dateAdded date-added Date added date as string string undefined
dateAddedLabel date-added-label Label for date added string undefined
duration duration Duration number string undefined
durationLabel duration-label Label for duration number string undefined
headerstyle headerstyle string 'with-sidebar'
horizontal horizontal Use horizontal layout where metadata is on side boolean false
linkToVideo link-to-video Url to video, used with preview image string undefined
playButtonLabel play-button-label Label for play button if preview image is provided string undefined
playButtonVisible play-button-visible Should play button be visible boolean false
previewImageUrl preview-image-url Preview image url string undefined
videoDescription video-description Video description string undefined
videoTitle video-title Video title string undefined
views views Views count number string undefined
viewsLabel views-label Label for views number string undefined

# Dependencies

# Depends on

# Graph

graph TD;
  hy-video --> hy-icon
  hy-video --> hy-heading
  hy-video --> hy-paragraph-text
  style hy-video fill:#f9f,stroke:#333,stroke-width:4px

Helsinki University Design System

← Breadcrumbs →