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

1
npm i --save @plural-wc/media
2
// or
3
yarn add @plural-wc/media
Copied!
1
import { PluralMedia } from '@plural-wc/media';
2
// or
3
import '@plural-wc/media/plural-media.js';
Copied!

Uso

Uso básico

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

Ratio

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

Ejemplos

Vertical

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

Horizontal

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

Auto

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

Video

1
<plural-media ratio="4:3">
2
<video
3
controls
4
muted
5
slot="media"
6
src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4"
7
></video>
8
</plural-media>
Copied!

Embedded Youtube

1
<plural-media ratio="16:9">
2
<iframe
3
slot="media"
4
src="https://www.youtube-nocookie.com/embed/-sr-Fu0_tQM"
5
title="YouTube video player"
6
frameborder="0"
7
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
8
allowfullscreen
9
></iframe>
10
</plural-media>
Copied!
Última actualización 8mo ago