---
title: "Media"
description: "Pictures, video, audio, captions, fonts and files - the media library, which formats work, cropping and the captions editor."
canonical_url: "https://docs.ols.yonn.online/en/build/media"
---
# Media

> Pictures, video, audio, captions, fonts and files - the media library, which formats work, cropping and the captions editor.

Media are the files you bring into your course: pictures, videos, sound, captions, fonts and PDFs. They are all collected in the course's **media library**. They stay in your browser and are packed into the course file when you publish. This page explains:

- **Adding media** to a slide.
- **The media library**: all files of the course in one place.
- **Pictures, video and audio**: their settings.
- **Captions**: subtitles for video, audio and narration.

![The empty media library with the supported formats for pictures, audio, video and captions](https://docs.ols.yonn.online/screenshots/en/media-library.png)

## Add a picture in 3 steps

<procedure>

### Choose Image

Open the **Insert** tab and click **Image**. Your computer's file window opens.

### Pick the file

Choose a picture. It is added to the media library and placed on the slide.

### Adjust it

Drag it into place and resize it. In the **Format** tab you set how it fills its frame or crop it.

</procedure>

<hint-box kind="tip" title="Even faster">

Drag pictures, videos or audio files from your computer straight onto the slide. They are inserted at once.

</hint-box>

## Which files work

<table>
<thead>
  <tr>
    <th>
      Kind
    </th>
    
    <th>
      Formats
    </th>
    
    <th>
      Hint
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Pictures
    </td>
    
    <td>
      PNG, JPG, SVG, WebP, GIF, AVIF
    </td>
    
    <td>
      Ideally under 1 MB and about as wide as the slide (1280 px for 16:9).
    </td>
  </tr>
  
  <tr>
    <td>
      Video
    </td>
    
    <td>
      MP4 with H.264 (recommended), WebM, Ogg
    </td>
    
    <td>
      Keep videos short and small. Everything ends up in the course file.
    </td>
  </tr>
  
  <tr>
    <td>
      Audio
    </td>
    
    <td>
      MP3 (recommended), M4A, OGG, WAV
    </td>
    
    <td>
      MP3 plays everywhere and is small.
    </td>
  </tr>
  
  <tr>
    <td>
      Captions
    </td>
    
    <td>
      WebVTT (<code>
        .vtt
      </code>
      
      ), at most 2 MB
    </td>
    
    <td>
      Subtitles for video, audio and narration.
    </td>
  </tr>
  
  <tr>
    <td>
      Fonts
    </td>
    
    <td>
      WOFF, WOFF2, TTF, OTF
    </td>
    
    <td>
      Your own fonts for text.
    </td>
  </tr>
  
  <tr>
    <td>
      Files
    </td>
    
    <td>
      PDF
    </td>
    
    <td>
      For downloading, for example a handout in the player's resources.
    </td>
  </tr>
</tbody>
</table>

A single file can be up to 500 MB. But large files make the course load slowly in Moodle, so make them smaller before you upload if you can.

<hint-box kind="warning" title="Moodle has an upload limit">

Moodle refuses course files above its maximum upload size. With many videos, ask your Moodle administrator about the limit, or link to a video on a web server instead.

</hint-box>

## The media library

Open it with <ui-path path="Insert > Media library">



</ui-path>

 or <ui-path path="View > Media library">



</ui-path>

.

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        All
      </strong>
      
       and the kind filters
    </td>
    
    <td>
      Show all files or only <strong>
        Images
      </strong>
      
      , <strong>
        Videos
      </strong>
      
      , <strong>
        Audio
      </strong>
      
      , <strong>
        Captions
      </strong>
      
      , <strong>
        Fonts
      </strong>
      
       or <strong>
        Files
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Search
      </strong>
    </td>
    
    <td>
      Finds files by name.
    </td>
  </tr>
  
  <tr>
    <td>
      Size
    </td>
    
    <td>
      How much space all media of this course take.
    </td>
  </tr>
  
  <tr>
    <td>
      Question mark
    </td>
    
    <td>
      <strong>
        Which files work?
      </strong>
      
       Shows the supported formats and sizes.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Upload
      </strong>
    </td>
    
    <td>
      Adds files from your computer. You can also drag files into the window.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Insert on slide
      </strong>
    </td>
    
    <td>
      Places the file on the current slide with one click.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Used ... times
      </strong>
    </td>
    
    <td>
      How often the file is used in the course.
    </td>
  </tr>
  
  <tr>
    <td>
      File menu
    </td>
    
    <td>
      <strong>
        Rename
      </strong>
      
      , <strong>
        Download
      </strong>
      
       or <strong>
        Delete
      </strong>
      
       the file. When you delete a file that is in use, the Studio tells you how often it was used.
    </td>
  </tr>
</tbody>
</table>

## Pictures

Select a picture and open the **Format** tab.

<table>
<thead>
  <tr>
    <th>
      Setting
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Fit
      </strong>
    </td>
    
    <td>
      How the picture fills its frame: <strong>
        Fit
      </strong>
      
       (whole picture visible), <strong>
        Fill
      </strong>
      
       (frame filled, edges may be cut off) or <strong>
        Stretch
      </strong>
      
       (distorted to fit).
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Crop
      </strong>
    </td>
    
    <td>
      Opens the crop window. Drag the frame or its handles; only the bright area stays visible. Choose an <strong>
        Aspect ratio
      </strong>
      
       (<strong>
        Free
      </strong>
      
      , <strong>
        Match frame
      </strong>
      
      , <strong>
        Original
      </strong>
      
      ). <strong>
        Fit frame
      </strong>
      
       adjusts the picture's height so nothing is distorted. Click <strong>
        Apply
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Remove crop
      </strong>
    </td>
    
    <td>
      Shows the whole picture again.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Use aspect ratio
      </strong>
    </td>
    
    <td>
      Gives the frame the proportions of the picture.
    </td>
  </tr>
  
  <tr>
    <td>
      Change picture
    </td>
    
    <td>
      Choose another file from the media library. The position stays.
    </td>
  </tr>
</tbody>
</table>

## Video

The **Video** button on the **Insert** tab offers **Upload video file**, **Video from link** and **From media library**.

<table>
<thead>
  <tr>
    <th>
      Setting
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Source
      </strong>
    </td>
    
    <td>
      <strong>
        File
      </strong>
      
       from the media library or <strong>
        URL
      </strong>
      
      : a direct https link to a video file (mp4 or webm).
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Poster image
      </strong>
    </td>
    
    <td>
      A picture shown before the video starts.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Captions
      </strong>
    </td>
    
    <td>
      A WebVTT file with subtitles.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Autoplay
      </strong>
    </td>
    
    <td>
      Starts the video by itself. Some browsers block autoplay with sound; then the video starts after a click.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Controls
      </strong>
    </td>
    
    <td>
      Shows play, pause and volume on the video.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Loop
      </strong>
    </td>
    
    <td>
      Plays the video again and again.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Muted
      </strong>
    </td>
    
    <td>
      Plays without sound.
    </td>
  </tr>
</tbody>
</table>

## Audio

<table>
<thead>
  <tr>
    <th>
      Setting
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Show icon in the player
      </strong>
    </td>
    
    <td>
      Shows a small sound icon learners can click. Off: the audio plays invisibly.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Volume
      </strong>
      
      , <strong>
        Autoplay
      </strong>
      
      , <strong>
        Loop
      </strong>
    </td>
    
    <td>
      As the names say.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Captions
      </strong>
    </td>
    
    <td>
      A WebVTT file with the spoken text.
    </td>
  </tr>
</tbody>
</table>

Every slide can also have its own narration: open the slide's **Format** tab and choose a file under **Audio**.

## Captions

Captions are the subtitles that run along with a video or narration. They help learners who can't hear the sound or are in a quiet place.

<procedure>

### Open the captions editor

Go to the slide with the video or audio and click <ui-path path="Insert > Captions">



</ui-path>

. Under **Media** you choose the video, the audio or the **Slide narration**.

### Set cues

Start playback. At the moment a sentence begins, click **Set cue at current position** and type the text. Adjust **Start** and **End** with the buttons next to each entry.

### Fine-tune

**Shift all by** moves all captions **Earlier** or **Later** by some seconds. **Import .vtt** and **Export .vtt** exchange caption files with other programs.

### Save

Click **Save**. The captions are stored as a `.vtt` file in the media library.

</procedure>

## If something doesn't work

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      What to do
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      A file is not imported
    </td>
    
    <td>
      The format is not supported, or the file is larger than 500 MB. Check the table above.
    </td>
  </tr>
  
  <tr>
    <td>
      The video does not start by itself
    </td>
    
    <td>
      The browser blocks autoplay with sound. Switch on <strong>
        Muted
      </strong>
      
      , or let learners start it with a click.
    </td>
  </tr>
  
  <tr>
    <td>
      A video from a link does not play
    </td>
    
    <td>
      The link must point directly to a video file (ending in .mp4 or .webm) and start with https.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Captions
      </strong>
      
       shows "No video or audio on this slide"
    </td>
    
    <td>
      Insert a video or audio object first, or choose slide audio in the slide's Format tab.
    </td>
  </tr>
  
  <tr>
    <td>
      The course loads slowly in Moodle
    </td>
    
    <td>
      The media are too large. Make pictures smaller and shorten videos.
    </td>
  </tr>
</tbody>
</table>

<hint-box kind="ai" title="With AI">

AI apps add media with the tool `add_media`. The file is checked (type, content, size, only static SVG) and stored in your browser. The AI cannot make the server download anything from the internet.

</hint-box>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.