Skip to content
SHINSEGAE V UI

Media Embed

이미지와 비디오가 모두 사용될 수 있는 영역에 사용합니다.

Astro
---
import MediaEmbed from "@shared/ui/media-embed/MediaEmbed.astro";
---


<MediaEmbed src="path/to/image.jpg" />
<MediaEmbed src="path/to/video.mp4" video={true} />
<MediaEmbed src="path/to/video.mp4" video={{ autoplay: true }} />

Props:

  • src: string: 이미지/영상의 소스 URL
  • width?: number: 이미지/영상의 가로 크기.
  • height?: number: 이미지/영상의 세로 크기.
  • dim?: boolean: 이미지/영상 위에 어두운 레이어를 추가합니다
  • fit?: "contain" | "cover": 이미지/영상의 object-fit 값. (default: "contain")
  • video?: boolean | VideoPlayer Props: 기본 옵션으로 적용 시 true, VideoPlayer 컴포넌트 옵션을 변경하려면 VideoPlayer Prop 객체를 사용

CSS Custom Properties:

  • --v-media-aspect-ratio: 미디어의 가로 세로 비율
  • --v-media-bg: 영역 배경색(기본: #d8d8d8)
  • --v-media-dim: 어두운 레이어 색상(기본: rgba(0, 0, 0, 0.05))
  • --v-media-fit: 이미지/영상의 object-fit 값(기본: contain)

HTML Class

  • v-media_aspect_default, v-media_aspect_2-3: 기본 1:1.5 비율 적용 시 사용. --v-media-aspect-ratio를 사용하여 지정되므로 상위 엘리먼트에 선언 가능.
  • v-media_aspect_square: 1:1 비율

기본 HTML

<div class="v-media-embed">
  <img class="v-media-embed__element v-media-embed__image" ... />
</div>


<div class="v-media-embed">
  <video-player
    class="v-video-player v-media-embed__element v-media-embed__video"
  >
    <video ...>...</video>
  </video-player>
</div>

추가 스타일링 클래스

  • v-media-embed--dim: 이미지/영상 위에 어두운 레이어 추가
  • v-media-embed--cover: 이미지/영상의 object-fit을 cover로 설정
<div class="v-media-embed v-media-embed--dim v-media-embed--cover">
  <!-- ... -->
</div>

이미지

<div class="v-media-embed">
  <img
    class="v-media-embed__element v-media-embed__image"
    src="/path/to/image.jpg"
    alt=""
    width="350"
    height="525"
  />
</div>

비디오

비디오 사용 관련하여 비디오 플레이어 문서를 참고하세요.

<div class="v-media-embed v-media-embed--dim v-media-embed--cover">
  <script type="module">
    if (!window.customElements.get("video-player")) {
      import("/ui/element/video-player.js");
    }
  </script>


  <video-player
    class="v-video-player v-media-embed__element v-media-embed__video"
  >
    <video poster="/path/to/poster.jpg" width="350" height="525" playsinline>
      <source src="/path/to/video.mp4" type="video/mp4" />
    </video>
  </video-player>
</div>