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>

Filter Tag

Multiselect

Última actualización 1yr ago

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.