Purpose: Allows you to relocate the AnyClip Player on the page (for example in single-page apps or infinite-scroll layouts).
API Method
anyclip.widgets[0].playerMoved();
Calling this method signals that the player container has been moved in the DOM and triggers re-initialization of the core player internals.
When & Why You Use It
If you move the player’s DOM container (for instance to a new section of your SPA, or after infinite-scroll loading triggers a layout change), you must inform the player of the change so it can update internal references and continue functioning normally.
Recommended Step-by-Step Workflow
Prepare the move
Ensure the player is fully initialized (loaded and ready to play).
Identify the source container (current parent element) and the target container (where you want it to live after the move).
const video = document.querySelector("source_container");
const target = document.querySelector("target_container");Move the DOM element
Remove the player’s container from its current parent and append it to the target container:video.parentElement.removeChild(video);
target.appendChild(video);Call the move API
Immediately after the DOM relocation, call:anyclip.widgets[0].playerMoved();
This step is mandatory—without it the player may malfunction.
(Optional) Manage player state for hidden/inactive usage
If you are temporarily hiding or deactivating the player (e.g., during scroll-off screen), call the player’s idle method to put it into hibernation.
Then when the player is to be re-activated in its new location, resume its active state before or after calling
anyclip.widgets[0].playerMoved();depending on your setup.
Note: Once idle, the player ignores further API calls until re-activated.
Important Notes & Warnings
Although you may manipulate the container by other means (CSS positioning, display toggling, moving via framework functions), you must still call
anyclip.widgets[0].playerMoved();each time the player’s HTML element is moved in the DOM.Failing to call this API after relocating the player will lead to unpredictable behavior or loss of functionality.
The move API does not itself move the DOM element—it only notifies the player that the move has already occurred.
Quick Example
// 1. Ensure player is ready
const playerContainer = document.querySelector("#player-container");
const newParent = document.querySelector("#new-wrapper");
// 2. Move the player in the DOM
playerContainer.parentElement.removeChild(playerContainer);
newParent.appendChild(playerContainer);
// 3. Notify the player of the move
anyclip.widgets[0].playerMoved();