@yola/ws-component-media-container NPM

ws-media-container

Custom element that allows you to put any <img> or <video> element inside and configure it's display and positioning. It works as if you were combining object-fit: cover, object-position: x% y%, and scale.

Usage

Put any <img> or <video> element inside <ws-media-container> and configure it's positioning using special attributes.

<ws-media-container aspect-ratio="0.9" content-position="50% 50%" content-scale="1.5">
  <img src="path/to/image.jpg" alt="Some image" />
</ws-media-container>

<!-- OR -->

<ws-media-container aspect-ratio="0.9" content-position="50% 50%" content-scale="1.5">
  <video src="path/to/video.mp4" autoplay loop />
</ws-media-container>

Attributes

Title	Example	Description
`aspect-ratio`	`"1.1"`	Sets media container height as a ratio, relative to the width of the media container. You still can affect container's size using plain CSS or any other method.
`content-position`	`"40% 70%"`	Percentage coordinates. Indicates the point on the picture or video that will aim to be placed in the center of the container.
`content-scale`	`"1.2"`	Scales the media inside container. It's recommended to use values from `1` to `3`.

Requirements

In order for the component to work correctly you need to add these styles to your page:

ws-media-container {
  display: block;
}

ws-media-container img,
ws-media-container video {
  width: 100%;
  height: 100%;
}

intersection-observer resize-observer-polyfill

@infinitebrahmanuniverse/nolb-_yol @everything-registry/sub-chunk-1042

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

6 months ago

7 months ago

7 months ago

7 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

12 months ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago