共有を埋め込む embed-share
埋め込み共有ツールは、ソーシャル共有パネルに追加されたボタンと、ツールがアクティベートされたときに表示されるモーダルダイアログボックスで構成されます。 ボタンの位置は、ソーシャル共有ツールで完全に管理されます。
埋め込み共有ボタンの外観は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embedshare
埋め込み共有ツールの CSS プロパティ
state 属性セレクターをサポートしています。CSS クラスに CSS プロパティを設定することで、ソーシャル共有パネルからボタン display:none 削除することができます。
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 28 x 28 ピクセルで、4 つの異なるボタン状態ごとに異なる画像を表示する埋め込み共有ボタンを設定するには：
.s7videoviewer .s7embedshare {
width:28px;
height:28px;
}
.s7videoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7videoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7videoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7videoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}
ダイアログボックスがアクティブな場合に web ページを覆う背景のオーバーレイは、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7backoverlay
背景オーバーレイの CSS プロパティ
例 – 背景オーバーレイを 70% の不透明度でグレーに設定するには：
.s7videoviewer .s7embeddialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
デフォルトでは、モーダルダイアログボックスはデスクトップシステムでは画面の中央に表示され、タッチデバイスでは web ページ領域全体を取ります。 どの場合でも、ダイアログボックスの位置とサイズはコンポーネントで管理されます。 このダイアログボックスは、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialog
ダイアログボックスの CSS プロパティ
例 – ブラウザーウィンドウ全体を使用し、タッチデバイスの背景が白くなるようにダイアログボックスを設定するには：
.s7videoviewer .s7touchinput .s7embeddialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
ダイアログボックスヘッダーは、アイコン、タイトルテキスト、閉じるボタンから構成されます。 ヘッダーコンテナは、
.s7videoviewer .s7embeddialog .s7dialogheader
ダイアログボックスヘッダーの CSS プロパティ
アイコンとタイトルテキストは、で制御される追加のコンテナにラップされます
.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline
ダイアログラインの CSS プロパティ
ヘッダーアイコンは、次の CSS クラスセレクターで制御します
.s7videoviewer .s7embeddialog .s7dialogheadericon
ダイアログボックスのヘッダーアイコンの CSS プロパティ
ヘッダーのタイトルは、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogheadertext
ダイアログボックスのヘッダーテキストの CSS プロパティ
「閉じる」ボタンは、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7closebutton
閉じるボタンの の CSS プロパティ
state 属性セレクターをサポートしています。閉じるボタンのツールヒントとダイアログボックスのタイトルは、ローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – パディング、24 x 14 ピクセルのアイコン、太字の 16 ポイントのタイトルを使用してダイアログヘッダーを設定する 最後に、28 x 28 ピクセルの「閉じる」ボタンが、ダイアログボックスのコンテナの上から 2 ピクセル、右から 2 ピクセルの位置に表示されます。
.s7videoviewer .s7embeddialog .s7dialogheader {
padding: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7videoviewer .s7embeddialog .s7dialogheadericon {
background-image: url("images/sdk/dlgembed_cap.png");
height: 14px;
width: 24px;
}
.s7videoviewer .s7embeddialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7videoviewer .s7embeddialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7videoviewer .s7embeddialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7videoviewer .s7embeddialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
ダイアログフッターは、「キャンセル」ボタンで構成されています。 フッターコンテナは、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogfooter
ダイアログボックスのフッター の CSS プロパティ
フッターには、ボタンを保持する内部コンテナがあります。 次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer
ダイアログボックスのボタンコンテナの CSS プロパティ
「すべてを選択」ボタンは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialogactionbutton
ボタンは、デスクトップシステムでのみ使用できます。
「すべてを選択」ボタンの CSS プロパティ
state 属性セレクターがサポートされており、異なるボタン状態に異なるスキンを適用するために使用できます。「キャンセル」ボタンは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialogcancelbutton
ダイアログボックスのキャンセルボタンの CSS プロパティ
state 属性セレクターがサポートされており、これを使用して、ボタンの状態に応じて異なるスキンを適用できます。さらに、両方のボタンは共通の CSS クラスを共有します。このクラスには、他のダイアログボックスのボタンと同じ CSS 設定を含めることができます。
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button
ボタンの CSS プロパティ
ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 64 x 34 の「キャンセル」ボタンを持つダイアログボックスのフッターを設定し、ボタンの状態ごとにテキストカラーと背景色が異なるようにするには、次の手順に従います。
.s7videoviewer .s7embeddialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7videoviewer .s7embeddialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7videoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7videoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
メインダイアログ領域は、ヘッダーとフッターの間に、スクロール可能なダイアログコンテンツと、右側のスクロールパネルを含んでいます。 いずれの場合も、コンポーネントはこの領域の幅を管理し、CSS で設定することはできません。 メインダイアログ領域は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogviewarea
ダイアログボックスの表示エリアの CSS プロパティ
例 – メインダイアログボックス領域の高さを 300 ピクセルに設定し、余白を 10 ピクセルにして背景を白くするには：
.s7videoviewer .s7embeddialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
すべてのフォームコンテンツ（ラベルや入力フィールドなど）は、で制御されるコンテナに格納されます
.s7videoviewer .s7embeddialog .s7dialogbody
このコンテナの高さがメインダイアログボックスの領域よりも大きく表示される場合、コンポーネントによって垂直スクロールが自動的に有効になります。
ダイアログボックスの本文の CSS プロパティ
例 – フォームコンテンツの 10 ピクセルのパディングを設定するには：
.s7videoviewer .s7embeddialog .s7dialogbody {
padding: 10px;
}
ダイアログボックスのフォームのすべての静的ラベルは、次のコントロールで制御されます
.s7videoviewer .s7embeddialog .s7dialoglabel
このクラスは、フォームユーザーインターフェイスの様々な場所でテキストに適用できるので、ラベルのサイズや位置の制御には適していません。
ダイアログボックスのラベルの CSS プロパティ。
ダイアログ ボックス ラベルのツール ヒントはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – すべてのラベルを 9 ピクセルのフォントを使用してグレー、太字に設定するには：
.s7videoviewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
埋め込みコードの上に表示されるテキストコピーのサイズは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialoginputwide
ダイアログボックス入力全体フィールドの CSS プロパティ
例 – テキストコピーの幅を 430 ピクセルに設定し、下部に 10 ピクセルのパディングを含める場合：
.s7videoviewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
埋め込みコードはコンテナにラップされ、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialoginputcontainer
ダイアログボックス入力コンテナの CSS プロパティ
例 – 埋め込みコードテキストの周囲に 1 ピクセルグレーの境界線を設定する場合は、幅を 430 ピクセルにし、10 ピクセルのパディングにします。
.s7videoviewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
実際の埋め込みコードテキストは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialoginputcontainer
ダイアログボックス入力コンテナの CSS プロパティ
例 – でのワードラッピングを使用するように埋め込みコード break-word 設定するには：
.s7videoviewer .s7embeddialog .s7dialogmessage {
word-wrap: break-word;
}
埋め込みサイズのラベルとドロップダウンはダイアログボックスの下部にあり、次の CSS クラスセレクターで制御されるコンテナに配置します。
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel
ダイアログボックス埋め込みサイズパネルの CSS プロパティ
例 – 10 ピクセルのパディングを持つ埋め込みサイズパネルを設定するには：
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel {
padding: 10px;
}
埋め込みサイズラベルのサイズと配置は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogembedsizepanel
ダイアログボックス埋め込みサイズパネルの CSS プロパティ
例 – 埋め込みサイズ ラベルを上揃えおよび幅 80 ピクセルに設定するには：
.s7videoviewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
埋め込みサイズ コンボボックスの幅は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7combobox
コンボボックスの CSS プロパティ
true および false の可能な値を持つ expanded 属性セレクターがサポートされています。 true の値は、コンボボックスに事前定義済みの埋め込みサイズのいずれかが表示される場合に使用されるので、使用可能なすべての幅を取る必要があります。 false の値は、コンボボックスで「カスタムサイズ」オプションが選択されている場合に使用されます。そのため、カスタムの幅および高さの入力フィールドを配置できるように、値を縮小する必要があります。例 – 事前定義済みの項目を表示する場合に埋め込みサイズ コンボボックスの幅を 300 ピクセルに、カスタムサイズを表示する場合に幅を 110 ピクセルに設定する：
.s7videoviewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7videoviewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
コンボボックステキストの高さは、特別な内部要素によって定義され、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext
コンボボックステキストの CSS プロパティ
例 – 埋め込みサイズ コンボボックスのテキストの高さを 40 ピクセルに設定するには：
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
コンボボックスの右側には「ドロップダウン」ボタンがあり、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton
コンボボックスボタンの CSS プロパティ
このボタンでは、ボタンの状態に応じて異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。
例 – 「ドロップダウン」ボタンを 28 x 28 ピクセルに設定し、状態ごとに別々の画像を持つ場合：
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
width:28px;
height:28px;
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7videoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
コンボボックスを開くと表示される埋め込みサイズのリストを含むパネルは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7comboboxdropdown
パネルのサイズと位置は、コンポーネントによって制御されます。 CSS を使用して変更することはできません。
コンボボックスドロップダウンの CSS プロパティ
例 – コンボボックスパネルの境界線を 1 ピクセルのグレーに設定するには：
.s7videoviewer .s7embeddialog .s7comboboxdropdown {
border: 1px solid #CCCCCC;
}
ドロップダウンパネル内の 1 つの項目。次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dropdownitemanchor
ドロップダウンアイテムアンカーの CSS プロパティ
例 – コンボボックスのパネル項目の背景を白に設定するには：
.s7videoviewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
コンボボックスパネル内で選択された項目の左側に表示されるチェックマーク。以下の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7checkmark
チェックボックスの CSS プロパティ
例 – チェックマークアイコンを 25 x 25 ピクセルに設定するには：
.s7videoviewer .s7embeddialog .s7checkmark {
background-image: url("images/sdk/cboxchecked.png");
height: 25px;
width: 25px;
}
埋め込みサイズ コンボボックスで「カスタムサイズ」オプションを選択すると、ダイアログボックスの右側に 2 つの追加入力フィールドが表示され、ユーザーがカスタム埋め込みサイズを入力できます。 これらのフィールドは、次の CSS クラスセレクターで制御されるコンテナにラップされます。
.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel
ダイアログボックスのカスタムサイズパネルの CSS プロパティ
例 – カスタムサイズの入力フィールドパネルをコンボボックスの右側の 20 ピクセルに設定するには：
.s7videoviewer .s7embeddialog .s7dialogcustomsizepanel {
left: 20px;
}
各カスタムサイズ入力フィールドは、境界線をレンダリングし、フィールド間の余白を設定するコンテナにラップされます。 次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7dialogcustomsize
ダイアログボックスのカスタムサイズの CSS プロパティ
例 – カスタムサイズの入力フィールドに 1 ピクセルのグレーの境界線、余白、パディングを設定し、幅を 70 ピクセルにするには：
.s7videoviewer .s7embeddialog .s7dialogcustomsize {
border: 1px solid #CCCCCC;
margin-right: 20px;
padding-left: 2px;
padding-right: 2px;
width: 70px;
}
垂直方向のスクロールが必要な場合、スクロールバーはダイアログボックスの右端の近くのパネルにレンダリングされます。このパネルは、次の CSS クラスセレクターで制御されます。
.s7videoviewer .s7embeddialog .s7dialogscrollpanel
ダイアログボックスのスクロールパネルの CSS プロパティ
例 – スクロールパネルの幅を 44 ピクセルに設定する
.s7videoviewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
スクロールバー領域の外観は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7scrollbar
スクロールバーの CSS プロパティ
例 – 幅 28 ピクセルで、スクロールパネルの上、右および下から 8 ピクセルのマージンを持つスクロールバーを設定するには、次のようにします。
.s7videoviewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
スクロールバートラックは、上部と下部のスクロールボタンの間の領域です。 トラックの位置と高さが自動的に設定されます。 トラックは、次の CSS クラスセレクターで制御します
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack
スクロールバートラックの CSS プロパティ
例 – 幅 28 ピクセルで背景がグレーのスクロールバーのトラックを設定するには：
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
スクロールバーの親指は、スクロールトラック領域内で垂直に移動します。 垂直方向の位置は、コンポーネントのロジックによって完全に制御されます。 ただし、コンテンツの量に応じて親指の高さが動的に変化することはありません。 親指の高さやその他の側面は、次の CSS クラスセレクターで設定できます。
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb
スクロールバーのサムネールの CSS プロパティ
up、down、over、disabled などの異なるサムステートに異なるスキンを適用するために使用できる state 属性セレクターをサポートしています。例 – 28 x 45 ピクセルのスクロールバーの親指を設定し、上下に 10 ピクセルのマージンがあり、状態ごとに異なるアートワークを持つ場合：
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
上部と下部のスクロールボタンの外観は、次の CSS クラスセレクターで制御します。
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton
CSS の top、left、bottom、right プロパティを使用してスクロールボタンを配置することはできません。 代わりに、ビューアロジックによって自動的に配置されます。
上下のスクロールボタンの CSS プロパティ
state 属性セレクターをサポートしています。このセレクターを使用して、ボタンの状態（up、down、over、disabled）に応じて異なるスキンを適用できます。ボタンのツールチップはローカライズできます。 詳しくは、 ユーザーインターフェイス要素のローカライゼーションを参照してください。
例 – 28 x 32 ピクセルで、状態ごとに異なるアートワークを持つスクロールボタンを設定するには：
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7videoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}