Call to action call-to-action

Het deelvenster Call to action wordt weergegeven wanneer de video wordt beëindigd en alle interactieve stalen worden weergegeven die aan de specifieke video zijn gekoppeld.

Het deelvenster bestaat uit een koptekstgebied dat de titel van de video weergeeft, een knop voor het opnieuw afspelen in de rechterbovenhoek en feitelijke interactieve stalen die als schuifbaar raster worden weergegeven. U kunt het paneel onbruikbaar maken gebruikend het ​ callToActionRecap ​ configuratieattribuut.

Het call to action-deelvenster neemt altijd het volledige beschikbare viewergebied in beslag.

Met de volgende CSS-klassenkiezer bepaalt u de weergave van de achtergrondkleur in het deelvenster call to action:

.s7interactivevideoviewer .s7calltoaction

CSS-eigenschappen van de achtergrondkleur van het call to action-deelvenster css-properties-of-the-background-color-of-the-call-to-action-panel

Voorbeeld example

Een call to action-deelvenster met donkergrijze achtergrond instellen:

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

Met de volgende CSS-klassenkiezer bepaalt u de weergave van de koptekst in het deelvenster call to action:

.s7interactivevideoviewer .s7calltoaction .s7header

CSS-eigenschappen van de koptekst van het deelvenster call to action css-properties-of-the-call-to-action-panel-header

Voorbeeld example-1

Een koptekst instellen die 70 pixels hoog is, met een donkergrijze achtergrond en een iets lichtere grijze rand van twee pixels langs de onderkant:

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

De volgende CSS-klassenkiezer bepaalt de weergave van de kopteksttitel in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7header .s7title

CSS-eigenschappen van de kopteksttitel in het call to action-deelvenster: css-properties-of-the-header-title-in-the-call-to-action-panel

Voorbeeld example-2

U stelt als volgt een titel van een video in met een regelhoogte van 70 pixels, een tekengrootte van 25 pixels, een witte kleur en een links uitgelijnde tekst:

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

De volgende CSS-klassenkiezer bepaalt de vormgeving van de sluitknop in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7closebutton

CSS-eigenschappen van de sluitknop in het call to action-deelvenster: css-properties-of-the-close-button-in-the-call-to-action-panel

Voorbeeld example-3

Een afspeelknop van 28 x 28 pixels instellen. De knop moet zich 20 pixels van de bovenkant en de rechterrand van de koptekst bevinden. En, moet het een verschillend beeld voor elk van de vier verschillende knoopstaten tonen; neemt het kunstwerk van SPRITE van de component beeld:

.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;
}

De volgende CSS-klassenkiezer bepaalt de weergave van het miniatuurraster in het deelvenster call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview

CSS-eigenschappen van de weergave van het miniatuurraster in het deelvenster call to action: css-properties-of-the-thumbnail-grid-view-in-the-call-to-action-panel

Voorbeeld example-4

Een miniatuurgebied met een donkergrijze achtergrond instellen:

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

De volgende CSS-klassenkiezer bepaalt de vormgeving van de blokcel in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7thumbcell

CSS-eigenschappen van de blokcel in het call to action-deelvenster: css-properties-of-the-thumbcell-in-the-call-to-action-panel

Voorbeeld example-5

Zo stelt u de horizontale afstand in van 24 pixels en de verticale afstand van 18 pixels:

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

Met de volgende CSS-klassenkiezer bepaalt u de weergave van de miniatuur in het deelvenster call to action:

.s7interactivevideoviewer .s7calltoaction .s7thumb

CSS-eigenschappen van de miniatuur in het deelvenster call to action: css-properties-of-the-thumbnail-in-the-call-to-action-panel

Voorbeeld example-6

Miniaturen van 94 x 100 pixels instellen:

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

De volgende CSS-klassenkiezer bepaalt de vormgeving van het miniatuurlabel in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7label

CSS-eigenschappen van het miniatuurlabel in het deelvenster call to action: css-properties-of-the-thumbnail-label-in-the-call-to-action-panel

Voorbeeld example-7

Als u labels wilt instellen die een witte kleur gebruiken, moet u 15 pixels gecentreerd zijn en een Arial®-lettertype gebruiken:

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

Als er meer miniaturen zijn dan verticaal in de weergave passen, wordt aan de rechterkant een verticale schuifbalk weergegeven. Standaard wordt in het deelvenster call to action een kleine verticale balk zonder blokje en schuifknoppen weergegeven. Het is echter mogelijk de balk aan te passen door de CSS van de viewer te wijzigen.

De volgende CSS-klassenkiezer bepaalt de vormgeving van het gebied van de schuifbalk in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar

CSS-eigenschappen van het gebied van de schuifbalk in het deelvenster call to action: css-properties-of-the-scroll-bar-area-in-the-call-to-action-panel

Voorbeeld example-8

Als u een schuifbalk wilt instellen die 22 pixels breed is en geen marge heeft vanaf de bovenkant, de rechterkant of de onderkant van het miniatuurgebied:

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

Het schuifbalkvak is het gebied tussen de bovenste en onderste schuifbalkknoppen. De component stelt automatisch de positie en de hoogte van het spoor in.

De volgende CSS-klassenkiezer bepaalt de weergave van het schuifbalkvak in het call to action-deelvenster:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolltrack

CSS-eigenschappen van de schuifbalk css-properties-of-the-scroll-track-bar

Voorbeeld example-9

U stelt als volgt een schuifbalktrack in die 22 pixels breed is en een grijze kleur heeft:

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

Het schuifbalkblokje verplaatst zich verticaal binnen het gebied van het schuifvak. De verticale positie wordt volledig bepaald door de componentlogica, maar de hoogte van het blokje verandert niet dynamisch, afhankelijk van de hoeveelheid inhoud.

De volgende CSS-klassenkiezer bepaalt de vormgeving van de duimhoogte en andere aspecten:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollthumb

CSS-eigenschappen van de hoogte van het blokje in het deelvenster call to action: css-properties-of-the-thumb-height-in-the-call-to-action-panel

Voorbeeld example-10

Als u een schuifbalkblokje van 6 x 167 pixels wilt instellen, hebt u drie afgeronde hoeken van pixels en een grijze kleur:

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

Met de volgende CSS-klassenkiezer bepaalt u de vormgeving van de bovenste en onderste schuifknoppen:

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrollupbutton

.s7interactivevideoviewer .s7calltoaction .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton

Het is niet mogelijk om schuifknoppen te positioneren met de CSS-eigenschappen top, left, bottom of right. De viewerlogica positioneert ze automatisch. In het deelvenster call to action in de interactieve videoviewer worden deze knoppen in de schuifbalk niet gebruikt. De grootte van deze knoppen wordt daarom in de standaard-CSS ingesteld op 0 pixels.

CSS-eigenschappen van de schuifknoppen boven en onder in het deelvenster call to action: css-properties-of-the-top-and-bottom-scroll-buttons-in-the-call-to-action-panel

De knopinfo kan worden gelokaliseerd. Zie ​ Localisatie van gebruikersinterfaceelementen ​.

Voorbeeld example-11

Schakel schuifknoppen uit door de grootte in te stellen op 0 en deze te verbergen:

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