Technical Integration
Step 1: EXCO SDK
#1: EXCO Yield SDK Integration
To integrate the EXCO Yield SDK, include the following code in the page <head> or as close to the opening <head> tag as possible.
Example
<head>
<script src="https://exbd.ex.co/sdk.js" async></script>
<script>
window.exbd = window.exbd || { q: [] };
exbd.q.push(() => exbd.init({
supplyId: "SUPPLY_ID", // Required: Provided by EXCO
macros: {
gpid: "Your_GPID_Value"
}
}));
</script>
</head>
EXCO Yield SDK Parameters
| Parameter | Required | Description |
| supplyId | Yes | Unique identifier provided by EXCO. |
| macros.gpid | No | Global Placement ID (GPID) for your video demand. |
Note: This step is mandatory. Ensure the SDK is initialized early in the page load process to ensure proper ad serving functionality.
#2: EXCO Player SDK Integration
After integrating the EXCO Yield SDK, the next step is to integrate the EXCO player. Place the following code in the page <head> tag, or close to the opening <head> tag.
Example
<script>
(function(d, s, n) {
var js, fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s);
js.className = n;
js.src = "//player.ex.co/player/PLAYER_ID"; // Replace PLAYER_ID
with your actual player ID
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'exco-player'));
</script>
EXCO Player SDK Parameters
| Parameter | Required | Description |
| PLAYER_ID | Yes | Replace PLAYER_ID with your actual player ID provided by EXCO. |
| async | Recommended |
When placing the embed code inside the in the head tag, it's important to set it as async, so it won't block the page from loading. js.setAttribute('async', 'true'); |
| programmatic | No |
To enable the JavaScript API, please add a programmatic attribute to the player script tag. js.setAttribute('programmatic', 'true'); |
Note: For additional information and example visit the EXCO developers portal.
Step 2: Player Container
You must provide a container into which the EXCO player will be rendered. Inside this container, you can initially place an image tag that will serve as a poster until the EXCO player is fully ready. Once the player is ready, it will remove all child elements (including the image) and replace them with the player.
Example HTML Structure for Single Player Embed
<div id="PLAYER_ID">
<img src="LINK_TO_MY_IMAGE" alt="Poster Image">
</div>
Explanation
- Replace PLAYER_ID with the actual player ID provided by EXCO.
- Replace LINK_TO_MY_IMAGE with the URL to the image you want to display as a poster before the video player loads.
- The <img> tag will display the image as a placeholder. Once the EXCO player is ready, it will remove this image and render itself inside the div container.
Optimizing video for Core Web Vitals
make sure to set the width and height (can be done with CSS) attributes on the <img> tag. In Hero players embeds, the video is the LCP element, LCP is determined by the time that the poster image is rendered or the first frame of the video. As images are typically lighter, using poster images can result in a faster LCP. for more information, see Optimizing Lazy Loading for Improved LCP section below.
Recommendations
When embedding the EXCO player, consider the following best practices for using a poster or hero image:
-
Optimal Image Size: Ensure the image used as the poster (or hero image) is optimized for both desktop and mobile. A recommended size would be:
- Desktop: 1920x1080 pixels
- Mobile: 800x450 pixels
- Use responsive design techniques to ensure the image scales properly across devices.
- Image Compression: Use image compression techniques (e.g., JPEG or WebP formats) to reduce file size while maintaining quality. This will improve page load times and user experience.
- Alt Text: Always provide an alt attribute for the image to enhance accessibility and SEO. The alt text should describe the content of the image in a concise manner.
Fallback Image: Provide a fallback image in case the main poster image fails to load. This ensures a seamless experience for users if there are any network or image issues.
Optimizing Lazy Loading for Improved LCP
When the EXCO player is used as a Hero Player, it often becomes the Largest Contentful Paint (LCP) element on the page. Improving LCP is critical for optimizing user experience and maintaining performance, especially under constrained network conditions. One effective strategy is to lazy load non-critical elements such as widgets, images, and iframes that are not immediately visible in the viewport.
Key Considerations for Lazy Loading
Lazy load non-essential elements
Third-party widgets (e.g., content recommendations, comments) and iframes often consume significant bandwidth and processing time. By lazy loading these elements (i.e., deferring their loading until they are needed), bandwidth is freed up for more important resources.
Prioritize resources within initial viewport
Deferring the loading of assets outside the initial viewport ensures that critical resources like the EXCO player, which is the LCP element, load without contention for bandwidth. By reserving bandwidth for the EXCO player and other high-priority content, the page’s primary visual elements will load faster, improving both user perception and actual performance metrics.
Practical Application
- Implement lazy loading for non-critical elements (e.g., widgets, images, iframes) that do not appear in the user’s initial viewport.
- Ensure that the EXCO player, as the LCP element, loads immediately without delay.
- Use network prioritization techniques, such as preloading, to further ensure that the player resources are given priority in low-bandwidth environments.