---
isPage: true
draft: false
title: Video
description: Add video section
icon: video
hero:
  surtitle: Blocks
  title: Block video
  text: Add video section.
  ctas:
    - text: Documentation
      url: https://www.hugolify.io/docs/blocks/video/
      blank: true
    - text: Page code on Github
      url: https://raw.githubusercontent.com/Hugolify/hugolify-example-blocks/refs/heads/main/content/docs/video.md
      blank: true
      link: true
  ui:
    align: center
    theme: light
blocks:
  - type: video
    ui:
      grid: small
      offset: center
    heading:
      surtitle: Grid small
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: false
      controls: true
      loop: true
  - type: video
    ui:
      grid: medium
      offset: center
    heading:
      surtitle: Grid medium
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: true
      autoplay: true
      controls: false
      loop: true
      transcription: >-
        Curabitur nec ipsum sit amet tellus *sagittis* blandit. Nulla massa nibh,
        cursus a arcu et, viverra sodales ipsum. Duis id congue metus. In commodo
        lectus ut **ligula elementum**, ac commodo tortor rhoncus. Vivamus
        sollicitudin eu magna sed interdum. Mauris lobortis pulvinar lectus at
        semper. Proin ac nunc urna. In placerat lorem ut tempus interdum. Maecenas
        nec iaculis lorem.

  #  THEME
  - type: video
    ui:
      grid: full
      theme: accent
    heading:
      surtitle: Grid full / Theme accent
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true
  - type: video
    ui:
      grid: large
      offset: center
      theme: dark
    heading:
      surtitle: Grid large / Offset center / Theme dark
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true
  - type: video
    ui:
      grid: medium
      offset: center
      theme: light
    heading:
      surtitle: Grid medium / Offset center / Theme light
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true

  - type: video
    ui:
      grid: full
      theme: highlight
    heading:
      surtitle: Grid full / Theme highlight
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true

  - type: video
    ui:
      grid: full
      theme: neutral
    heading:
      surtitle: Grid full / Theme neutral
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true

  - type: video
    ui:
      grid: full
      theme: black
    heading:
      surtitle: Grid full / Theme black
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true

  - type: video
    ui:
      grid: full
      theme: white
    heading:
      surtitle: Grid full / Theme white
      title: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    video:
      mp4: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.mp4
      webm: https://57fec860-25f5-48e3-a3f5-d58e0c572935.mdnplay.dev/shared-assets/videos/flower.webm
      screenshot: false
      autoplay: true
      controls: false
      loop: true
---