VideoLoop

GitHub

Denne komponenten er ny eller har nylig fått større endringer.

Ta den i bruk og kom gjerne med innspill til oss på Slack hvordan du synes den fungerer.

Om komponenten

VideoLoop viser en video i loop uten lyd, som en "GIF". Videoen spilles av automatisk og brukeren kan pause og spille av videoen ved å trykke på den.

Dersom brukeren har aktivert reduced motion vil ikke videoen spilles av automatisk.

Egnet til:

  • For å få frem et budskap uten å bruke for mye tekst og bilder
  • For å bryte opp teksttungt innhold med et visuelt grep

Uegnet til:

  • Videoer med lyd

Retningslinjer

En VideoLoop må alltid ha en tekstlig beskrivelse, enten en synlig eller en visuelt skjult tekst ("alt").

Eksempler

<VideoLoop
  className="aspect-w-16 aspect-h-9"
  src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
  format="mp4"
  alt="En postbil kjører rundt i det moderne nabolaget på Frysja. Her finnes det fine uteområder, med husker og kafeer."
/>


<>
  <VideoLoop
    className="aspect-w-16 aspect-h-9"
    src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
    format="mp4"
  />
  <p>
      <Description>
        I det moderne nabolaget på Frysja finnes det fine uteområder, med husker og kafeer.
    </Description>
  </p>
</>


<>
  <VideoLoop
    className="aspect-w-16 aspect-h-9"
    src="https://res.cloudinary.com/obosit-prd-ch-clry/video/upload/v1732199756/Mellom%20husene/Frysja_Loop2.mp4"
    format="mp4"
    alt="En postbil kjører rundt i nabolaget på Frysja"
  />  
  <p>
      <Description>
        I det moderne nabolaget finnes det fine uteområder, med husker og kafeer.
      </Description>
  </p>
</>

Props

VideoLoop

PropDescriptionDefault
srcThe video url-
formatThe video format-
alt?The content of the video must have a text description, so that it is accessible to screen readers. You can either provide just a caption, just an alt text, or both a caption and an alt text. Make sure the alt text doesn't repeat too much of the caption text, if so just a caption is sufficent. Think of this just as an alt text, but for a muted video - this text will not be visible, but read by screen readers.-
className?-