Using the Same Embed Code Multiple Times on One Page

Incorrect Usage

A common mistake is using the same Vidalytics embed code more than once on the same page. This often happens when users want to display the same video in different locations, such as separate desktop and mobile sections.

For example, the following code illustrates what such an implementation might look like:

<div class="desktop">
  <!-- Vidalytics embed code for Video A -->
</div>

<div class="mobile">
  <!-- Same Vidalytics embed code for Video A -->
</div>

Why It's a Problem

Each Vidalytics player requires a unique element ID to mount correctly on the page. Reusing the same embed code creates duplicate element IDs, preventing multiple instances of the same player from initializing properly.

As a result, only one video will be displayed, even if the embed code is added in multiple locations.

Additionally, if multiple instances were able to run, they could cause issues with analytics tracking, as playback events from both players would be associated with the same video.

If you need to display the same video in multiple locations on a page, use separate videos with unique embed codes. You can also create a duplicate of an existing video directly from the Vidalytics dashboard.

Note

If you want to display different videos based on screen width, use the Vid Conditions feature. See How to Set Up Vid Conditions .