Media
Media es un componente atómico que utilizamos para representar e instanciar cualquier contenido de tipo imagen o vídeo.
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.
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. |
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
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';
<plural-media>
<img slot="media" src="https://picsum.photos/800/450?random=0" alt="Image" />
</plural-media>
<plural-media ratio="2:1">
<img slot="media" src="https://picsum.photos/800/450?random=1" alt="Image" />
</plural-media>
<plural-media position="vertical">
<img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>
<plural-media position="horizontal">
<img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>
<plural-media position="auto">
<img slot="media" src="https://picsum.photos/800/450?random=2" alt="Image" />
</plural-media>
<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>
<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>
Última actualización 1yr ago