誘い文句(CTA、コールトゥアクション)

コールトゥアクションパネルは、ビデオが終了すると表示され、特定のビデオに関連付けられているすべてのインタラクティブスウォッチを表示します。

パネルは、ビデオタイトルを示すヘッダー領域、右上隅の再生ボタン、スクロール可能なグリッドとして表示される実際のインタラクティブスウォッチで構成されます。 設定属性callToActionRecapを使用して、パネルを無効にできます。

コールトゥアクションパネルは、常にビューア領域全体を使用します。

以下に示すCSSクラスセレクターで、コールトゥアクションパネルの背景色の外観を制御します。

.s7interactivevideoviewer .s7calltoaction

コールトゥアクションパネルの背景色のCSSプロパティ

background-color

コールトゥアクションパネルの背景色。

背景色が濃いグレーのコールトゥアクションパネルを設定するには:

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのヘッダーの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7header

コールトゥアクションパネルヘッダーのCSSプロパティ

background-color

ヘッダーの背景色。

height

ヘッダーの高さ。

border-bottom

ヘッダーの下の境界線。

高さ70ピクセルで、背景が濃いグレーで、下部にグレーの境界線がやや明るい2ピクセルのヘッダーを設定するには、次のように記述します。

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのヘッダータイトルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

コールトゥアクションパネルのヘッダータイトルのCSSプロパティ:

color

バナー内のテキストカラー。

font-size

フォントサイズ

行の高さ

行の高さ

font-family

フォントファミリ。

text-align

バナー内のテキストの整列。

padding-left

左パディング。

padding-right

右パディング:「再生」ボタンのスペースを許可します。

70ピクセルの線の高さ、25ピクセルのフォントサイズ、白の色および左揃えのビデオタイトルを設定するには:

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルの閉じるボタンの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7closebutton

コールトゥアクションパネルの閉じるボタンのCSSプロパティ:

トップ

パディングを含む、ヘッダーの上からの位置。

パディングを含む、ヘッダーの右側からの位置。

width

ボタンの幅。

height

ボタンの高さ。

background-image

特定のボタン状態に対して表示される画像。

background-position

CSSスプライトを使用する場合は、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

このボタンでは、 state属性セレクターがサポートされます。このセレクターは、ボタンの状態ごとに異なるスキンを適用するのに使用できます。

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プロパティ:

background-color

サムネール領域の背景色。

濃いグレーの背景を持つサムネール領域を設定するには:

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムセルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

コールトゥアクションパネルのthumbcellのCSSプロパティ:

margin

各サムネールの周囲の水平および垂直のマージンのサイズ。

実際のサムネールの水平方向の間隔は、 .s7thumbcell に設定された左右のマージンの合計になります。 同じ規則が適用されますが、縦の間隔に適用されます。

24ピクセルの水平方向の間隔と18ピクセルの垂直方向の間隔を設定するには:

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムネールの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumb

コールトゥアクションパネルのサムネールのCSSプロパティ:

width

サムネールの幅。

height

サムネールの高さ。

枠線

サムネールの境界線。

メモ

サムネールでは、 state属性セレクターがサポートされます。このセレクターは、サムネールの状態ごとに異なるスキンを適用するのに使用できます。 特に、state="selected"は現在選択されている画像のサムネールに対応します。state="default"は、残りのサムネールに対応します。state="over"は、マウスカーソルを合わせたときに使用されます。

94 x 100ピクセルのサムネールを設定するには:

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

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのサムネールラベルの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7label

コールトゥアクションパネルのサムネールラベルのCSSプロパティ:

color

ラベルのテキストカラー。

text-align

ラベルの水平方向の整列。

font-family

フォント名

font-size

フォントファミリ。

白色を使用するラベルを設定するには、中央揃えで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プロパティ:

width

スクロールバーの幅。

トップ

サムネール領域の上部からのスクロールバーの垂直方向のオフセット。

サムネール領域の下端からのスクロールバーの垂直方向のオフセット。

サムネール領域の右端からのスクロールバーの水平方向のオフセット。

幅が22ピクセルで、サムネール領域の上、右または下からの余白がないスクロールバーを設定するには、次のように記述します。

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

スクロールバートラックは、上下のスクロールバーボタンの間の領域です。 このコンポーネントは、トラックの位置と高さを自動的に設定します。

以下に示すCSSクラスセレクターで、コールトゥアクションパネルのスクロールバートラックの外観を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

スクロールトラックバーのCSSプロパティ

width

スクロールトラックバーの幅。

background-color

トラックバーの背景色。

幅が22ピクセルで、グレー色のスクロールバートラックを設定するには:

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

スクロールバーサムは、スクロールトラック領域内で垂直方向に移動します。 垂直方向の位置は、コンポーネントのロジックで完全に制御されます。ただし、サムの高さはコンテンツの量に応じて動的に変化するわけではありません。

次のCSSクラスセレクターで、サムの高さの外観とその他の要素を制御します。

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

コールトゥアクションパネルのサムの高さのCSSプロパティ:

width

サムの幅。

height

サムの高さ。

padding-top

トラックの上部間の垂直方向のパディング。

padding-bottom

トラックの下端との間の垂直方向のパディング。

border-radius

境界線の半径。

background-color

サムのカラー

background-image

サムの特定の状態に対して表示される画像。

background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

サムでは、 state属性セレクターがサポートされます。このセレクターは、次のサムの状態ごとに異なるスキンを適用するのに使用できます。"up""down""over"、および"disabled"です。

6 x 167ピクセルで、3ピクセルの丸い角とグレーの色を持つスクロールバーサムを設定するには、次のように記述します。

.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のtop、left、bottomまたはrightプロパティを使用してスクロールボタンを配置することはできません。ビューアのロジックによって、自動的に配置が決まります。 インタラクティブビデオビューアのコールトゥアクションパネルでは、スクロールバーのこれらのボタンは使用されないので、初期設定のCSSではサイズが0ピクセルに設定されています。

コールトゥアクションパネルの上下のスクロールボタンのCSSプロパティ:

width

ボタンの幅。

height

ボタンの高さ。

background-image

特定のボタン状態に対して表示される画像。

background-position

CSSスプライトを使用する場合の、アートワークスプライト内の位置。

CSSスプライトを参照してください。

メモ

これらのボタンでは、 state属性セレクターがサポートされます。このセレクターは、次のサムの状態ごとに異なるスキンを適用するのに使用できます。"up""down""over"、および"disabled"です。

ボタンのツールチップはローカライズできます。 ユーザインターフェイス要素のローカライゼーションを参照してください。

スクロールボタンのサイズを0に設定して非表示にすることで、スクロールボタンを無効にします。

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

このページ