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

<div class="ecl-media-container">
  <figure class="ecl-media-container__figure"><video class="ecl-media-container__media" controls
      poster="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg">
      <source type="video/mp4" src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.mp4" />
      <source type="video/webm" src="https://inno-ecl.s3.amazonaws.com/media/videos/big_buck_bunny.webm" />
      <track kind="captions" label="English" src="/captions/bunny-en.vtt" srclang="en" />
      <track kind="captions" label="français" src="/captions/bunny-fr.vtt" srclang="fr" />
    </video>
    <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

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">
  <figure class="ecl-media-container__figure">
    <div class="ecl-media-container__media"><iframe title="New digital strategy" 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).