조치 수행 질문

비디오가 종료되고 특정 비디오와 연결된 모든 대화형 색상 견본을 표시할 때 [액션 호출] 패널이 나타납니다.

패널은 비디오 제목을 표시하는 헤더 영역, 오른쪽 위 모서리의 재생 단추, 스크롤 가능한 그리드로 표시되는 실제 대화형 색상 견본으로 구성됩니다. callToActionRemap 구성 속성을 사용하여 패널을 비활성화할 수 있습니다.

작업 패널에 대한 호출은 항상 사용 가능한 전체 뷰어 영역을 사용합니다.

다음 CSS 클래스 선택기는 작업 패널 호출에서 배경색의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction

작업 패널 호출 배경색의 CSS 속성

예

어두운 회색 배경을 사용하여 작업 패널에 대한 호출을 설정하려면 다음을 수행하십시오.

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

다음 CSS 클래스 선택기는 작업 패널 호출에서 헤더의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7header

작업 패널 헤더에 대한 호출의 CSS 속성

예

70픽셀이고, 어두운 회색 배경이 있고, 하단을 따라 약간 더 밝은 회색의 2픽셀 테두리가 있는 헤더를 설정하려면 다음을 수행하십시오.

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

다음 CSS 클래스 선택기는 작업 패널 호출에서 헤더 제목의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

작업 패널 호출에 있는 헤더 제목의 CSS 속성:

예

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

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

다음 CSS 클래스 선택기는 작업 호출 패널에서 닫기 버튼의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7closebutton

작업 패널 호출에 있는 닫기 버튼의 CSS 속성:

예

28 x 28픽셀인 재생 단추를 설정하려면 다음을 수행하십시오. 버튼은 헤더의 위쪽 및 오른쪽 가장자리로부터 20픽셀을 배치해야 합니다. 또한, 서로 다른 네 가지 단추 상태 각각에 대해 다른 이미지를 표시해야 합니다. 구성 요소의 스프라이트 이미지에서 아트웍을 가져옵니다.

.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 속성:

예

어두운 회색 배경을 사용하여 축소판 영역을 설정하려면 다음을 수행하십시오.

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

다음 CSS 클래스 선택기는 [액션 호출] 패널에서 thumb 셀의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

동작 패널에 있는 축소판 셀의 CSS 속성:

예

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

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

다음 CSS 클래스 선택기는 작업 패널 호출에서 축소판의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumb

작업 패널 호출 축소판의 CSS 속성:

예

94 x 100픽셀인 축소판을 설정하려면 다음을 수행합니다.

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

다음 CSS 클래스 선택기는 작업 패널 호출에서 축소판 레이블의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7label

작업 패널 호출에 있는 축소판 레이블의 CSS 속성:

예

흰색 색상을 사용하는 레이블을 설정하려면 가운데 맞춤을 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 속성:

예

축소판 영역의 위쪽, 오른쪽 또는 아래쪽의 여백이 없는 22픽셀인 스크롤 막대를 설정하려면 다음을 수행하십시오.

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

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

다음 CSS 클래스 선택기는 작업 호출 패널에서 스크롤 막대 트랙의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

스크롤 추적 막대의 CSS 속성

예

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

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

스크롤 막대 엄지는 스크롤 트랙 영역 내에서 세로로 이동합니다. 세로 위치는 구성 요소 논리에 의해 완전히 제어됩니다. 그러나 엄지 높이 는 콘텐츠의 양에 따라 동적으로 변경되지 않습니다.

다음 CSS 클래스 선택기는 엄지 높이 및 기타 종횡비의 모양을 제어합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

동작 패널 호출에서 축소판 높이의 CSS 속성:

예

6 x 167 픽셀인 스크롤 막대 엄지를 설정하려면 세 픽셀 라운드 모서리와 회색 색상을 사용합니다.

.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 속성:

단추 도구 설명은 현지화할 수 있습니다. 사용자 인터페이스 요소의 로컬라이제이션을 참조하십시오.

예

스크롤 단추의 크기를 0으로 설정하고 이를 숨겨서 스크롤 단추를 비활성화합니다.

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}
.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton {
 visibility: hidden;
 width: 0px;
 height: 0px;
}

Business.Adobe.com 리소스

Style System Embedded Charts Content As A Service Dynamic Media Digital Rights Management Digital Asset Management