@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 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year 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

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

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

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

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

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago