Media

Media es un componente atómico que utilizamos para representar e instanciar cualquier contenido de tipo imagen o vídeo.

Racional de aplicación

Utilizamos el componente Media para insertar contenido multimedia de tipo imagen o vídeo. No es una buena práctica anidar contenido de tipo gif ni imágenes o vídeos sin comprimir.

Buenas prácticas

Uso correcto	Uso incorrecto
Debemos utilizar los ratios establecidos.	No debemos utilizar proporciones que no estén contempladas en los ratios establecidos (consultar variabilidad).
Debemos asegurarnos de que la proporción del contenido media no se rompe.	No debemos deformar el contenido media al re-escalar el componente.
Debemos garantizar una resolución óptima.	Hemos de evitar utilizar imágenes o vídeos de baja resolución.

Anatomía y variabilidad

Variabilidad

Las variantes del componente atómico media se corresponden con una serie de ratios de proporciones:

• 1:1

• 1:1.5

• 9:16

• 16:9

Instalación

npm i --save @plural-wc/media
// or
yarn add @plural-wc/media

import { PluralMedia } from '@plural-wc/media';
// or
import '@plural-wc/media/plural-media.js';

Uso

Uso básico

<plural-media>
  <img slot="media" src="https://picsum.photos/800/450?random=0" alt="Image" />
</plural-media>

Ratio

<plural-media ratio="2:1">
  <img slot="media" src="https://picsum.photos/800/450?random=1" alt="Image" />
</plural-media>

Ejemplos

Vertical

<plural-media position="vertical">
  <img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>

Horizontal

<plural-media position="horizontal">
  <img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>

Auto

<plural-media position="auto">
  <img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>

Video

<plural-media ratio="4:3">
  <video
    controls
    muted
    slot="media"
    src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4"
  ></video>
</plural-media>

Embedded Youtube

<plural-media ratio="16:9">
  <iframe
    slot="media"
    src="https://www.youtube-nocookie.com/embed/-sr-Fu0_tQM"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</plural-media>