How to Target an Outstream bein.js Player Tag using the 'Selector' and 'Position' Macros

To target your outstream player you must perform the following two stages:

  1. Check the page DOM.
  2. Add Outstream Selector & Position Macros.


Check the Page DOM

To target your Outstream player using the Selector and Position macros you will need to inspect the web page first. The following code is an example that will describe how to use the Selector and Position macros.

In the following example, you will see a DOM structure within a web page. Let's say we would like to target the Outstream player to expand in the 4th paragraph.

Note: This code example is assuming that an Outstream player tag is embedded somewhere else on the page (within the <body> tags).

<section class='main'>
   <div id='one' class='class'>
     <p>Paragraph-1 Some text here...</p>
     <p>Paragraph-2 Some text here...</p>
     <p>Paragraph-3 Some text here...</p>
     <p>Paragraph-4 We want our Outstream player here</p>
     <p>Paragraph-5 Some text here...</p>
     <p>Paragraph-6 Some text here...</p>
     <p>Paragraph-7 Some text here...</p>
     <p>Paragraph-8 Some text here...</p>
   </div>
</section>

 

Selector Macro

The Selector macro is used to select a DOM element the same as using JavaScript's 'document.querySelectorAll("selector)' or jQuery's '$.("selector")' methods.
In our example above, our relevant selectors are the Paragraph elements under the <div> with the ID of 'one'. Therefore our selector value should be '#one p'.

Note: After finding the relevant selector copy it to your preferred text editor. This will be used to setup your player macros later on.

Note: You must target the Outstream player using an 'id' selector rather than a 'class' as the player cannot embed itself in multiple locations from one player tag.

Position Macro

The Position macro defines which into which selector the Outstream Player Tag will be embedded in. In the example above, our selectors are the paragraphs in the '#one' <div>. To select the 4th paragraph, we must set the Position macro to '4'. 

Note: After defining into which specific element you would like to embed the Outstream player tag to, copy the position number to your preferred text editor. This will be used to setup your player macros later on.

Note: This field only accepts integers and is used to target the relevant selector from the array.



Add Outstream Selector & Position Macros

To target an Outstream player using the Selector and Position macros, perform the following steps:

  1. Access the player wizard by editing an existing player or creating a new one.

    Outstream_Macros_201.jpeg

  2. Click on 'ADVANCED' and selecting the 'EMBED TAG' tab.
    Note: You can also click on the 
    three dot shortcut icon Icon-grab-code-shortcut.jpg located on the 'COPY TAG CODE' button on the Player Wizard footer to reach the embed tag tab.


    Outstream_Macros_202.jpeg

  3. Scroll down to the 'MACROS' area, and add the next two macros according to the following table. After entering each Macro Name and Value pair, click on '+Add macro' to add it to your player. For further details, please see How to add a macro.

    Macro Name Macro Value
    Selector Enter the DOM element selector in the first 'Value' field. In relation to our example, enter '#one p'. This will target all paragraph elements under the parent element that has the 'id' of 'one'.
    Position Enter the number of the selector element to target. In relation to our example, we want to target the 4th paragraph so we will enter the number '4'.


  4. Click on 'Save'. The selector and position macros are applied to the Outstream player tag and will override it's embedded position in the web page.

  5. Continue to Copy your Outstream Player Tag.


Have more questions? Submit a request