조치 수행 질문 call-to-action

이 비디오가 종료되면 콜 투 액션 패널이 나타나고 특정 비디오와 연결된 모든 대화형 견본을 표시합니다.

패널은 비디오 제목을 표시하는 헤더 영역, 오른쪽 위 모서리의 재생 버튼 및 스크롤 가능한 격자로 표시되는 실제 대화형 견본으로 구성됩니다. callToActionRecapp 구성 특성을 사용하여 패널을 비활성화할 수 있습니다.

콜 투 액션 패널은 항상 사용 가능한 전체 뷰어 영역을 가져옵니다.

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 배경색의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction

콜 투 액션 패널의 배경색 CSS 속성 css-properties-of-the-background-color-of-the-call-to-action-panel

배경색
콜 투 액션 패널의 배경색입니다.

example

어두운 회색 배경의 콜 투 액션 패널을 설정하려면:

.s7interactivevideoviewer .s7calltoaction {
    background-color: #222222;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 헤더의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7header

콜 투 액션 패널 헤더의 CSS 속성 css-properties-of-the-call-to-action-panel-header

배경색
헤더의 배경색입니다.
높이
헤더의 높이입니다.
테두리-아래쪽
헤더의 하단 테두리.

example-1

70픽셀 높이의 헤더를 설정하려면 어두운 회색 배경과 아래쪽의 약간 밝은 회색 2픽셀 테두리를 사용합니다.

.s7interactivevideoviewer .s7calltoaction .s7header {
    height: 70px;
    border-bottom: 2px solid #444444;
    background-color: #222222;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 헤더 제목의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

콜 투 액션 패널의 헤더 제목 CSS 속성: css-properties-of-the-header-title-in-the-call-to-action-panel

배너 내부의 텍스트 색입니다.
font-size
글꼴 크기입니다.
줄 높이
선 높이.
font-family
글꼴 모음.
텍스트 맞춤
배너의 텍스트 정렬.
패딩 왼쪽
왼쪽 패딩.
패딩 오른쪽
재생 버튼에 대한 공간을 허용하는 오른쪽 패딩.

example-2

70픽셀 선 높이, 25픽셀 글꼴 크기, 흰색 및 왼쪽 맞춤으로 비디오 제목을 설정하려면 다음을 수행하십시오.

.s7interactivevideoviewer .s7calltoaction .s7header .s7title {
    line-height: 70px;
    font-size: 25px;
    color: #ffffff;
    text-align: left;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 닫기 버튼의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7closebutton

콜 투 액션 패널에 있는 닫기 버튼의 CSS 속성: css-properties-of-the-close-button-in-the-call-to-action-panel

상위
패딩을 포함하여 헤더 위쪽에서 위치를 지정합니다.
오른쪽
패딩을 포함하여 헤더 오른쪽에서 이동합니다.
너비
단추 너비.
높이
단추 높이.
배경 이미지
지정된 단추 상태에 대해 표시되는 이미지.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트을(를) 참조하십시오.

NOTE
이 단추는 state 특성 선택기를 지원하며, 이 선택기는 다른 단추 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다.

example-3

28 x 28픽셀 재생 단추를 설정하려면 다음을 수행합니다. 단추는 머리글의 오른쪽 가장자리와 위쪽에서 20픽셀 떨어진 곳에 배치해야 합니다. 또한 4개의 서로 다른 버튼 상태에 대해 각각 다른 이미지를 표시해야 합니다. 에서는 구성 요소의 스프라이트 이미지에서 아트워크를 가져옵니다.

.s7interactivevideoviewer .s7calltoaction .s7closebutton {
 top: 20px;
 right: 20px;
 background-size: 336px;
 width: 28px;
 height: 28px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state] {
 background-image: url(images/v2/PlayPauseButton_sprite.png);
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='up'] {
 background-position: -28px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='over'] {
 background-position: -0px -1260px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='down'] {
 background-position: -28px -1232px;
}
.s7interactivevideoviewer .s7calltoaction .s7closebutton[state='disabled'] {
 background-position: -0px -1232px;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 썸네일 격자 보기의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

콜 투 액션 패널에 있는 썸네일 격자 보기의 CSS 속성: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

배경색
축소판 영역의 배경색입니다.

example-4

어두운 회색 배경의 축소판 영역을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview {
    background-color: #222222;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 썸네일 셀의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

콜 투 액션 패널에 있는 썸네일 셀의 CSS 속성: css-properties-of-the-thumbcell-in-the-call-to-action-panel

여백

각 썸네일 주변의 가로 및 세로 여백 크기입니다.

실제 가로 썸네일 간격은 .s7thumbcell 에 설정된 왼쪽 및 오른쪽 여백의 합계와 같습니다. 세로 간격에도 동일한 규칙이 적용됩니다.

example-5

가로 간격(24픽셀)과 세로 간격(18픽셀)을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbcell {
 margin-top: 9px;
 margin-bottom: 9px;
 margin-left: 12px;
 margin-right: 12px;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 썸네일의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumb

콜 투 액션 패널에 있는 썸네일의 CSS 속성: css-properties-of-the-thumbnail-in-the-call-to-action-panel

너비
썸네일의 폭.
높이
썸네일의 높이입니다.
테두리
썸네일의 테두리.
NOTE
썸네일은 state 특성 선택기를 지원하며, 이 선택기를 사용하여 다른 썸네일 상태에 다른 스킨을 적용할 수 있습니다. 특히 state="selected"은(는) 현재 선택한 이미지의 썸네일에 해당합니다. state="default"은(는) 나머지 썸네일에 해당합니다. state="over"은(는) 마우스 가리키기에 사용됩니다.

example-6

94 x 100픽셀인 썸네일을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumb {
 width:94px;
 height:100px;
}

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 썸네일 레이블의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7label

콜 투 액션 패널에 있는 썸네일 레이블의 CSS 속성: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

레이블의 텍스트 색입니다.
텍스트 맞춤
레이블의 수평 정렬.
font-family
글꼴 이름.
font-size
글꼴 모음.

example-7

흰색을 사용하는 레이블을 설정하려면 가운데 정렬(15픽셀)하고 Arial® 글꼴을 사용합니다.

.s7interactivevideoviewer .s7calltoaction .s7label {
 text-align: center;
 color: #ffffff;
  font-family: Arial,Helvetica,sans-serif;
  font-size: 15px;
}

보기에 수직으로 맞출 수 있는 것보다 많은 썸네일이 있는 경우 썸네일은 오른쪽에 세로 스크롤 막대를 렌더링합니다. 기본적으로 콜 투 액션 패널은 엄지 단추와 스크롤 단추 없이 작은 세로 막대를 렌더링합니다. 하지만 뷰어 CSS를 변경하여 막대를 사용자 지정할 수 있습니다.

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 스크롤 막대 영역의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

콜 투 액션 패널에서 스크롤 막대 영역의 CSS 속성: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

너비
스크롤 막대 폭.
상위
축소판 영역 상단에서 오프셋된 세로 스크롤 막대입니다.
하단
축소판 영역 아래쪽에서 오프셋된 세로 스크롤 막대입니다.
오른쪽
축소판 영역의 오른쪽 가장자리에서 오프셋된 가로 스크롤 막대입니다.

example-8

썸네일 영역의 위쪽, 오른쪽 또는 아래쪽에서 여백이 없는 22픽셀 너비의 스크롤 막대를 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar {
 top:0px;
 bottom:0px;
 right:0px;
 width:22px;
}

스크롤 막대 트랙은 위쪽 및 아래쪽 스크롤 막대 단추 사이의 영역입니다. 이 구성 요소는 트랙의 위치와 높이를 자동으로 설정합니다.

다음 CSS 클래스 선택기는 콜 투 액션 패널에서 스크롤 막대 트랙의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

스크롤 트랙 막대의 CSS 속성 css-properties-of-the-scroll-track-bar

너비
스크롤 트랙 막대의 폭입니다.
배경색
트랙 표시줄의 배경색입니다.

example-9

22픽셀 너비와 회색 색상을 갖는 스크롤 막대 트랙을 설정하려면 다음을 수행합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack {
 width:22px;
 background-color:#222222;
}

스크롤 막대 썸네일이 스크롤 트랙 영역 내에서 세로로 이동합니다. 해당 수직 위치는 구성 요소 논리에 의해 완전히 제어되지만 썸네일 높이는 컨텐츠의 양에 따라 동적으로 변경되지 않습니다.

다음 CSS 클래스 선택기는 썸네일 높이와 다른 양상의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

클릭 유도 문안 패널에 있는 썸네일 높이의 CSS 속성: css-properties-of-the-thumb-height-in-the-call-to-action-panel

너비
썸네일 폭.
높이
엄지손가락 높이.
패딩 상단
트랙 상단 사이의 수직 패딩.
패딩-하단
트랙 하단 사이의 수직 패딩.
border-radius
테두리 반경.
배경색
엄지 색상.
배경 이미지
지정된 썸네일 상태에 대해 표시되는 이미지입니다.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트을(를) 참조하십시오.

NOTE
Thumb은 state 특성 선택기를 지원합니다. 이 특성 선택기는 다음과 같은 다른 Thumb 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. "up", "down", "over""disabled".

example-10

6x167픽셀인 스크롤 막대 썸네일을 설정하려면 세 개의 픽셀로 둥근 모서리와 회색을 사용합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state] {
 width:6px;
 height:167px;
 background-color:#666666;
 background-image:none;
 border-radius:3px 3px 3px 3px;
}

다음 CSS 클래스 선택기는 위쪽 및 아래쪽 스크롤 단추의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

CSS 위쪽, 왼쪽, 아래쪽 또는 오른쪽 속성을 사용하여 스크롤 단추를 배치할 수 없습니다. 뷰어 로직은 스크롤 단추를 자동으로 배치합니다. 대화형 비디오 뷰어의 작업 패널 호출에서는 스크롤 막대에 이 단추를 사용하지 않으므로 기본 CSS에서 이 단추의 크기는 0픽셀로 설정됩니다.

콜 투 액션 패널의 상단 및 하단 스크롤 단추의 CSS 속성: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

너비
단추 폭.
높이
단추 높이.
배경 이미지
지정된 단추 상태에 대해 표시되는 이미지.
백그라운드 위치

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

CSS 스프라이트을(를) 참조하십시오.

NOTE
이러한 단추는 state 특성 선택기를 지원하며, 이 선택기는 다음과 같은 다른 썸네일 상태에 다른 스킨을 적용하는 데 사용할 수 있습니다. "up", "down", "over""disabled".

버튼 도구 팁은 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하세요.

example-11

스크롤 단추의 크기를 0으로 설정하고 숨길 수 있습니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8