Media

Media container

Image

Jean Monnet banner
The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
Fullscreen
<figure class="ecl-media-container"><img alt="Jean Monnet banner" class="ecl-media-container__media"
    src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" />
  <figcaption class="ecl-media-container__caption">The European Commission has put forward ambitious yet realistic
    proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the
    economy, the environment and geopolitics, amongst others.</figcaption>
</figure>

Try it yourself on the playground

Playground

Video (using <video> tag)

The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
Fullscreen

Try it yourself on the playground

Playground

Embedded video (using <iframe>)

Note: for embedded videos, a ratio has to be specified in order to display the iframe in a responsive way. Possible ratios are: '16-9', '4-3', '3-2' and '1-1'. Most common ratio is 16-9.

The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
Fullscreen

Try it yourself on the playground

Playground

Media container width

Media containers placed inside a grid container (.ecl-container) will expand to this container width; this is the case regardless of the content (image, video, embedded video).

To have a full width media container, the recommended way is to place it outside of the grid container.

However, if there is a need to have a full width media container inside the grid container, the css class .ecl-media-container--fullwidth can be used (just put it at the same level as .ecl-media-container).

Caution: if you plan to use full width media container using this fullwidth css class, we recommend to use the "website" preset, as some global rules here would improve the display (overflow-x: hidden).