Media container - Media

Image

Jean Monnet banner — Lorem ipsum dolor sit amet consectetur adipiscing elite tempored incididunt ut labore et dolore magna aliqua lorem ipsum dolor sit amet consectetur adipiscing
@Copyright

<div class="ecl-media-container">
  <figure class="ecl-media-container__figure">
    <picture class="ecl-picture ecl-media-container__picture"><img class="ecl-media-container__media"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg" alt="Jean Monnet banner" /></picture>
    <figcaption class="ecl-media-container__caption">Lorem ipsum dolor sit amet consectetur adipiscing elite tempored
      incididunt ut labore et dolore magna aliqua lorem ipsum dolor sit amet consectetur adipiscing<br />@Copyright
    </figcaption>
  </figure>
</div>

Try it yourself on the playground

Playground

Video (using <video> tag)

The European Commission Visitors' Centre provides the public with an understanding of how the European Commission works and its 3 policies and priorities. The Centre welcomes different interest groups to Brussels, or virtually, to help them better understand the role of the European Commission and how it impacts their daily lives. Visitors to the Centre in Brussels can enjoy a digital and multifunctional experience providing access to the latest initiatives.

Fullscreen

<div class="ecl-media-container">
  <figure class="ecl-media-container__figure"><video class="ecl-video ecl-media-container__media"
      poster="https://euc-vod.fl.freecaster.net/12/224712/THUMB_I224712EN1W_V_1.jpg"
      aria-label="Visit the European Commission - Video player" controls>
      <source type="video/mp4" src="https://euc-vod.fl.freecaster.net/12/224712/HD_I224712EN1W.mp4" />
    </video>
    <figcaption class="ecl-media-container__caption">The European Commission Visitors' Centre provides the public with
      an understanding of how the European Commission works and its 3 policies and priorities. The Centre welcomes
      different interest groups to Brussels, or virtually, to help them better understand the role of the European
      Commission and how it impacts their daily lives. Visitors to the Centre in Brussels can enjoy a digital and
      multifunctional experience providing access to the latest initiatives.</figcaption>
  </figure>
</div>

Try it yourself on the playground

Playground

Embedded video (using <iframe>)

Note: for embedded videos, the ratio is calculated based on the width and height provided with the video. It ensures a consistent display on all screen sizes.

It is also possible to manually specify a ratio if needed. Possible manual ratios are: '16-9', '4-3', '3-2' and '1-1'. Most common ratio is 16-9.

Fullscreen

<div class="ecl-media-container" data-ecl-media-container="true" data-ecl-auto-init="MediaContainer"
  data-ecl-media-container-video-title="New digital strategy - Video player">
  <figure class="ecl-media-container__figure">
    <div class="ecl-media-container__media"><iframe width="350" height="197"
        src="https://www.youtube.com/embed/fgi-GSCB6ho" frameBorder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe></div>
    <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>
</div>

Try it yourself on the playground

Playground

Infographic

Fullscreen

<div class="ecl-media-container" aria-describedby="expandable-example-content">
  <figure class="ecl-media-container__figure">
    <picture class="ecl-picture ecl-media-container__picture"><img class="ecl-media-container__media"
        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg" alt="Infographic alt text" />
    </picture>
    <figcaption class="ecl-media-container__caption">Lorem ipsum dolor sit amet consectetur adipiscing elite tempored
      incididunt ut labore et dolore magna aliqua lorem ipsum dolor sit amet consectetur adipiscing<br />@Copyright
    </figcaption>
  </figure>
  <div class="ecl-expandable ecl-media-container__expandable" data-ecl-expandable="true"
    data-ecl-auto-init="Expandable"><button class="ecl-button ecl-button--ghost ecl-expandable__toggle" type="button"
      aria-controls="expandable-example-content" data-ecl-expandable-toggle data-ecl-label-expanded="Expanded"
      data-ecl-label-collapsed="Collapsed" aria-expanded="false"><span class="ecl-button__container"><span
          class="ecl-button__label" data-ecl-label="true">Collapsed</span><svg
          class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon" focusable="false" aria-hidden="true"
          data-ecl-icon>
          <use xlink:href="/icons.svg#corner-arrow"></use>
        </svg></span></button>
    <div id="expandable-example-content" class="ecl-expandable__content" hidden>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at
        vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.</p>
    </div>
  </div>
</div>

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).