.. _poster-image:

Poster Image
==========================

For local videos, e.g. mp4 you can add a poster image that is added to the video.

This can either be done in the metadata of the video or in the file reference of the content element where the video is referenced.

.. tip::
   When you want to reference the video in multiple places on your website, it is recommended to :ref:`add the poster image to the video's metadata. <poster-image-metadata>` Then you only have to add it once.

   A :ref:`poster image in the file reference <poster-image-reference>` takes precedence of the metadate poster image.
   You can use that when you want to have different poster images for the same video.

.. _poster-image-metadata:

Add poster image in file metadata
===============

Switch to the module :guilabel:`File > Filelist`.

Select the video where you want to add the poster image and edit the metadata of the file

.. figure:: ../Images/PosterImage/FilelistEditMetadata.jpg
   :class: with-shadow
   :alt: Edit the files metadata
   :width: 600px

   Click the pencil button to edit the video's metadata


Switch to the :guilabel:`Video` tab and add or upload an image for the `Poster image` field

.. figure:: ../Images/PosterImage/FilelistEditMetadataDetail.jpg
   :class: with-shadow
   :alt: Switch to the video tab and add an image
   :width: 400px

   Add an existing or upload a new image file, that should be used as the video's poster image

.. figure:: ../Images/PosterImage/FilelistEditMetadataDone.jpg
   :class: with-shadow
   :alt: Image has been added
   :width: 600px

   When the image has been added, click `Save`

.. _poster-image-reference:

Add poser image in file references
===============

For example in a textmedia element.

Add your video. In the video file reference you can now add your poster image

.. figure:: ../Images/PosterImage/FileReferencePoster.jpg
   :class: with-shadow
   :alt: Switch to the video tab and add an image
   :width: 400px

   Add an existing or upload a new image file, that should be used as the video's poster image

.. figure:: ../Images/PosterImage/FileReferencePosterDone.jpg
   :class: with-shadow
   :alt: Image has been added
   :width: 600px

   When the image has been added, click `Save`