How to add and position the Inline Player on a page

Inserting an Inline Player is placed into a webpage by attaching it to a “Target Element” added to the page, which you set in the Flow Builder Activation tab.

The Player containing the Inline Flow will attempt to expand to fill to the edges of the Target Element on the page.

Once you have the ID of the element, enter it in the Activation tab in the Flow Builder e.g. #reelflow-player-1. See below the Illustration of how the Inline Player occupies space in the Target Element

Step by Step: Successfully embedding a ReelFlow Inline Player

1. Prepare a Clear Insertion Space and add a Target Element
   • On your existing webpage, have your web designer create an empty <div> exactly where you want the player to appear.
   • Assign a unique id to this <div> (e.g. id="reelflow-player-1"). For multiple players, each needs its own unique id. This will be your Target Element.
2. Keep the <div> unstyled for flexibility
   • Do not apply fixed heights or widths to the container. Let it fill the width of its container naturally. This helps the ReelFlow Player adapt to different screen sizes automatically.
3. Test Responsiveness
   • Check your webpage to confirm that the placeholder <div> spans the full width of the column or section, for all mobile to desktop sizes you need to support.
4. Use CSS for Fine-Tuning Size and Position
   • After inserting the Player, apply your usual CSS styles to the page to adjust margins or other visual elements as needed.
   • For more precise guidance on fine-tuning the position and setting dimensions of your Player using CSS, we recommend you read our Inline Player positioning article.
5. Keep IDs Unique and Consistent
   • Ensure each player instance has its own unique id, and avoid duplicating ids on a page.
6. Things To Watch Out For
   • It is possible to use other types of Target Elements other than <div> elements with IDs, but be aware they are less stable and reliable than a div with a unique ID.
   • Note that if your Target Element is hidden from sight by responsive CSS or JavaScript on the page, the ReelFlow Player may not appear.
7. Add the Target Element CSS Selector to the Activation tab in the Flow Builder
   • This now ensures we can inject the video into the webpage Target Element
   • Enter the id, e.g. #reelflow-player-1
   • Preview your Flow to see how it looks, and test the responsive nature of the page to ensure a good fit
8. Optional: Adjust Dimensions in the Activation tab
   • If needed, you can override dimensions like width, height, max-width, max-height, min-width, min-height, and aspect ratio in the Flow Builder Activation tab. However, note that the ReelFlow Player is designed to be responsive as standard, and will resize to fill the space you provide. If you artificially constrain the height or width, it can impact the automatic-responsive resizing nature of the Player.

Illustration of how the Inline Player occupies space in the Target Element

For more detailed instructions on adjusting the dimensions of an existing Target Element, see this article: Fine-tuning the dimensions of an Inline Player on a webpage

Adjusting the video fit inside the Player 

To assist with ensuring inline video content is shown in it's best light, there are two options to adjust the Video Fit, which can be set from the Activation tab in the Flow Builder.

Optimized (default) - Best for videos focused on a single person, talking to camera. The video fills out the Player, and may crop left and right sides:

Reveal - Best for videos containing multiple subjects, or where the content is wide. The whole video will be visible, with no cropping left or right:

Best Practice for using Inline & Overlay Players on the same page

When applying a combination of Overlay type Player and Inline type Players on a page, consider that overlapping video can be distracting.

If you have the space to create a permanent margin on the Overlay side of the page, it can create space to avoid Player overlap.