This document provides steps and guidelines to help troubleshoot issues with Vimocity’s Playlist and Player embeds. Follow these instructions to resolve common problems when integrating Vimocity widgets into your website or application.
Table of Contents
- General Issues
- Iframe-Specific Issues
- Script-Tag Specific Issues
- Domain Whitelisting Issues
- Widget-Specific Troubleshooting
- CDN Whitelisting for IT Teams
General Issues
These general troubleshooting steps can help resolve common issues with both the Playlist and Player widgets, regardless of how they are embedded.
- Check Client ID: Ensure the clientId property is correctly set and matches the ID provided by Vimocity. This is required for both widgets.
- Browser Console Errors: Open your browser’s developer tools and check the console for any errors. Common issues like CORS or script loading errors may appear here.
- Network Connectivity: Ensure that the device or network is properly connected to the internet and the site where the widget is embedded can access Vimocity’s servers.
- Check for Ad-Blockers: Some browser extensions, like ad-blockers, may interfere with the widgets. Disable them temporarily to see if this resolves the issue.
- Cross-Browser Compatibility: Test the embed on multiple browsers (Chrome, Firefox, Safari, Edge, etc.) to see if the issue persists across all or is browser-specific.
Iframe-Specific Issues
When embedding the Playlist or Player widgets using iframes, the following issues may arise:
-
Incorrect URL Format: Ensure the iframe src URL is correctly formatted.
- For the Playlist, the URL should be: https://embed.vimocity.com/v1/playlist/?clientId=YOUR_CLIENT_ID
- For the Player, the URL should be: https://embed.vimocity.com/v1/player/?clientId=YOUR_CLIENT_ID&rotationFrequency=ROTATION_FREQUENCY
-
Iframe Height and Width: If the widget is not displaying correctly, ensure the iframe dimensions are sufficient. Recommended dimensions are:
- Playlist: width="540", height="450px"
- Player: width="540px", height="400px"
- Iframe Restrictions: Check for any restrictions set on your site or CMS (e.g., iframe blocking policies) that might prevent the widget from loading. Adjust site security settings if needed.
Script Tag-Specific Issues
If you are embedding the widgets via script tags, you may encounter these issues:
- Script Not Loading: Ensure the correct script source is included in the HTML. The script URL should be:
| <script src="https://embed.vimocity.com/v1/vimocity-embeds/vimocity-embeds.esm.js"></script> |
- Correct Use of Web Components: Ensure that the custom HTML tags are properly used. For example:
|
<vimocity-playlist-embed client-id="YOUR_CLIENT_ID"></vimocity-playlist-embed> |
OR
| <vimocity-video-embed client-id="YOUR_CLIENT_ID" rotation-frequency="ROTATION_FREQUENCY"></vimocity-video-embed> |
- Custom Elements Not Defined: If the browser does not recognize the custom HTML elements, check for JavaScript errors in the browser’s console. This could indicate that the script file is not loading correctly or there is an issue with how the component is being initialized.
Domain Whitelisting Issues
If the widget is embedded using a script tag and isn’t loading, it’s possible the domain where it’s hosted hasn’t been whitelisted.
- Whitelist Check: Ensure that the domain where the widget is embedded has been provided to Vimocity for whitelisting.
- Contact Support: If you suspect a domain is not whitelisted, reach out to your Vimocity support contact or email coach@vimocity.com with the list of domains that need to be whitelisted.
Widget-Specific Troubleshooting
Playlist Embed Issues
- Playlist Not Loading: Check the clientId property to ensure they are correctly passed.
- Incomplete Playlist: Ensure your playlist configuration in the Vimocity system is properly set up. Contact support if the playlist content is not appearing as expected.
Player Embed Issues
- Video Not Rotating: Verify that the rotationFrequency property is set correctly and that it specifies the correct number of days.
- Player Not Loading: Check the clientId and ensure that the rotationFrequency is passed as a required parameter.
- Stuck Video: If the video isn’t changing after the expected rotation frequency, clear the browser’s cache and reload the page.
CDN Whitelisting for IT Teams
To ensure the proper functionality of Vimocity embeds, IT teams should make sure that the following CDN is whitelisted within their network security settings:
- CDN to Whitelist: embed.vimocity.com
This is necessary to prevent any issues with loading the scripts and other assets required for the Playlist and Player widgets.
Additional Support
For further assistance, don’t hesitate to contact us at coach@vimocity.com. We’re here to help ensure your embed works seamlessly.
Related to