🎬 Create your first Video

🎬 Create your first Video#

In this tutorial you will create a Video content item, paste a YouTube or Vimeo URL, and see the add-on automatically fetch the video's title, description, thumbnail, and duration.

🔧 Prerequisites#

1️⃣ Add a Video#

  1. Navigate to the folder where you want to add the video.

  2. Click Add new… in the toolbar.

  3. Select Video from the content type list.

You will see the Video edit form with a Video Player block in the main area. The block shows an icon and an input field. this is the in-block edit form.

2️⃣ Paste a video URL#

  1. Click the input field in the Video Player block.

  2. Paste a video URL, for example:

    • YouTube: https://www.youtube.com/watch?v=x7QX9tQxEBc

    • Vimeo: https://vimeo.com/110591222

Note

The input accepts any URL supported by the registered providers. Out of the box, YouTube and Vimeo URLs are recognized.

3️⃣ Fetch metadata#

After pasting the URL, click the arrow button (→) to the right of the input field. The add-on will:

  1. Send the URL to the @video-metadata REST API.

  2. The backend resolves the URL to a provider (YouTube or Vimeo).

  3. The provider fetches metadata from the external service.

  4. The metadata is returned to the frontend.

Once the fetch succeeds, you will see:

  • The Video Player block switches from the input form to the embedded player with a preview image.

  • The content's title and description are autopopulated from the video metadata (if they were empty).

  • A metadata preview appears in the sidebar showing the thumbnail, channel name, and duration.

4️⃣ Review and save#

  1. Check the title and description. edit them if you want to customize them.

  2. Adjust the player settings in the sidebar:

    • Auto Play: start the video automatically when the page loads.

    • Size: small, medium, or large.

    • Alignment: left, right, center, wide, or full width.

  3. Click Save.

5️⃣ View the result#

After saving, the Video page shows the embedded player with a click-to-play preview image. Clicking the play button loads the video from the external provider.

Tip

The add-on downloads the video thumbnail and stores it as the content's preview_image. This image is used as the player's poster frame and in listing views across the site.

⏭️ Next steps#

Contents