Embed

엠베드(Embed)는 YouTube, Vimeo 같은 외부 콘텐츠나 임의의 웹 콘텐츠를 페이지에 반응형으로 삽입하는 컴포넌트예요. 사용자가 상호작용하기 전까지 iframe을 로드하지 않아 페이지 성능을 지켜줘요.

출처: 문서

본문

When to Use

Responsive Aspect Ratio

엠베드는 내재적(intrinsic) 가로세로 비율을 사용해, 단일 지정 너비나 높이가 아니라 예상 비율에 따라 반응형으로 크기가 조절돼요.

Only Load After Interaction

iframe 엠베드를 직접 포함하면 페이지 로드 시 iframe 콘텐츠가 모두 자동으로 로드되어 페이지의 반응성이 크게 떨어질 수 있어요.

Network
          Embed Size
        
        
          
            
              Google Maps
            
            
              237kb
            
          
          
            
              YouTube
            
            
              380kb
            
          
          
            
              Vimeo
            
            
              81kb

Types

YouTube

엠베드는 YouTube 콘텐츠를 표시하는 데 사용할 수 있어요.

Vimeo

엠베드는 Vimeo 콘텐츠를 표시하는 데 사용할 수 있어요.

Custom Content

엠베드는 어떤 웹 콘텐츠든 표시할 수 있어요.

Embeds use an intrinsic aspect ratios to embed content responsively. Content will preserve their intrinsic aspect ratio for all browser sizes responsively

Variations

Aspect Ratio

엠베드는 square, 4:3, 16:9, 21:9 중 대체 가로세로 비율을 지정할 수 있어요.

Initializing

Specifying a URL

URL을 지정하면 그 URL의 도메인을 사용해 엠베드 소스와 자동으로 일치시켜요.

$('.url.example .ui.embed').embed();

Using Content IDs

Embed는 콘텐츠 ID에서 URL을 자동으로 생성하도록 설계됐어요. 이렇게 하면 사이트 백엔드가 의미 있는 콘텐츠 메타데이터를 저장하고 URL 생성에 신경 쓰지 않아도 돼요.

$('.content.example .ui.embed').embed();

Specifying Metadata

아이콘이나 플레이스홀더 이미지 같은 다른 설정은 메타데이터에 지정해 사이트의 프리셋을 덮어쓸 수 있어요.

$('.metadata.example .ui.embed').embed();

Specifying Programmatically

런타임에 settings 객체에서 엠베드 설정을 지정할 수도 있어요.

$('.custom.example .ui.embed').embed({
          source      : 'youtube',
          id          : 'O6Xo21L0ybE',
          alt         : 'A video about a waving bear',
          placeholder : '/images/bear-waving.jpg'
        });

Specifying New Sources

Embed는 사전 정의된 두 개의 엠베드 소스가 있으며 커스텀 소스로 확장할 수 있어요. 각 소스는 설정에 대한 기본 매개변수와 매핑, 템플릿 URL, 오버레이에 사용할 아이콘을 지정해요.

// built in
        $.fn.embed.settings.sources = {
          youtube: {
            name   : 'youtube',
            type   : 'video',
            icon   : 'video play',
            domain : 'youtube.com',
            url    : 'https://www.youtube.com/embed/{id}',
            parameters: function(settings) {
              return {
                autohide       : !settings.showUI,
                autoplay       : settings.autoplay,
                color          : settings.colors || undefined,
                hq             : settings.hd,
                jsapi          : settings.api,
                modestbranding : 1
              };
            }
          },
          vimeo: {
            name   : 'vimeo',
            type   : 'video',
            icon   : 'video play',
            domain : 'vimeo.com',
            url    : 'https://www.youtube.com/embed/{id}',
            parameters: function(settings) {
              return {
                api      : settings.api,
                autoplay : settings.autoplay,
                byline   : settings.showUI,
                color    : settings.colors || undefined,
                portrait : settings.showUI,
                title    : settings.showUI
              };
            }
          }
        };

Behaviors

다음 모든 행동은 다음 구문을 사용해 호출할 수 있어요:

.ui.your.element')
      .embed('behavior name', argumentOne, argumentTwo)
    ;

행동	설명
`change(source, id, url)`	iframe을 새 콘텐츠 소스로 변경해요.
`reset`	엠베드를 제거하고 가능하면 플레이스홀더 콘텐츠를 보여줘요.
`show`	엠베드 콘텐츠를 보여줘요.
`hide`	엠베드 콘텐츠를 숨기고 플레이스홀더 콘텐츠를 보여줘요.
`get id`	현재 콘텐츠 ID를 반환해요.
`get placeholder`	플레이스홀더 이미지 URL을 반환해요.
`get sources`	소스 이름을 반환해요.
`get type`	소스 타입을 반환해요.
`get url`	모든 매개변수가 추가된 URL을 반환해요.
`has placeholder`	엠베드 콘텐츠에 플레이스홀더가 있는지 반환해요.
`destroy`	인스턴스를 파괴하고 모든 이벤트를 제거해요.

Embed Settings

비디오 동작을 구성하는 설정이에요.

설정	기본값	설명
`icon`	`false`	플레이스홀더 콘텐츠에 사용할 아이콘을 지정해요.
`source`	`false`	사용할 소스를 지정해요. 소스를 제공하지 않으면 지정된 url의 도메인에서 결정돼요.
`url`	`false`	엠베드에 사용할 url을 지정해요.
`id`	`false`	템플릿 URL에서 발견되는 `{id}` 값을 대체할 id 값을 지정해요.
`placeholder`	`false`	플레이스홀더 이미지 경로를 지정해요.
`alt`	`false`	플레이스홀더 이미지의 alt 속성 문자열을 지정해요.
`parameters`	`false`	iframe의 GET 매개변수에 추가할 key/value 쌍을 담은 객체를 지정해요.

Video Settings

비디오 동작을 구성하는 설정이에요.

설정	기본값	설명
`autoplay`	`auto`	기본 설정 `auto`는 플레이스홀더가 지정될 때만 콘텐츠를 자동 재생해요. true/false로 설정하면 자동 재생을 강제해요.
`color`	`#444444`	Vimeo 또는 YouTube에서 기본 크롬 색상을 지정해요.
`url`	`false`	엠베드에 사용할 url을 지정해요.
`hd`	`true`	HD 콘텐츠를 선호할지 여부예요.
`brandedUI`	`false`	타이틀 카드나 비디오 후 콜투액션 같은 네트워크 브랜드 UI를 표시할지 여부예요.

Callbacks

콜백은 특정 행동 이후 발생할 함수를 지정해요.

콜백	매개변수	컨텍스트	설명
`onCreate`	url	`$module`	iframe이 생성될 때의 콜백이에요.
`onDisplay`		`$module`	iframe 콘텐츠가 표시될 때마다요.
`onPlaceholderDisplay`		`$module`	Embed가 DOM에서 제거되기 직전의 콜백이에요.
`onEmbed`	parameters	`$module`	모듈 매개변수가 결정될 때의 콜백이에요. 새 parameters 객체를 반환해 런타임에 매개변수를 조정할 수 있어요.

DOM Settings

DOM 설정은 이 모듈이 DOM과 어떻게 인터페이스할지 지정해요.

설정	기본값	설명
`namespace`	`embed`	이벤트 네임스페이스예요.
`selector`	`{ embed : '.embed', placeholder : '.placeholder', play : '.play' }`	내부적으로 사용되는 DOM 선택자예요.
`metadata`	`{ id : 'id', icon : 'icon', placeholder : 'placeholder', alt : 'alt', source : 'source', url : 'url' }`	데이터를 저장하는 데 사용되는 HTML 데이터 속성이에요.
`className`	`{ active : 'active', embed : 'embed' }`	상태에 스타일을 연결하는 데 사용되는 클래스 이름이에요.
`templates`	`{ iframe: function(url, parameters) {}, placeholder: function(image, icon, alt) {} }`	iframe과 플레이스홀더 HTML을 생성하는 템플릿이에요.
`errors`	`{ noURL : 'No URL specified', method : 'The method you called is not defined' }`	오류 메시지 설정이에요.

Debug Settings

디버그 설정은 콘솔에 대한 디버그 출력을 제어해요.

설정	기본값	설명
`name`	`Embed`	디버그 로그에 사용되는 이름이에요.
`silent`	`false`	모든 콘솔 출력을 조용히 만들어요.
`debug`	`false`	콘솔에 표준 디버그 출력을 제공해요.
`performance`	`true`	콘솔에 표준 디버그 출력을 제공해요.
`verbose`	`false`	콘솔에 보조 디버그 출력을 제공해요.

더 알아보기 (Learn more)

엠베드로 페이지 성능을 유지하면서 외부 콘텐츠를 반응형으로 삽입할 수 있어요. 소스와 메타데이터를 활용해 다양한 콘텐츠 유형을 지원해 보세요. 관련된 표시 방식은 Modal 문서도 참고하세요.