How to Swap an Embedded Video with URL Parameters

If you have several videos for different audiences, this script lets one page show a different video depending on the URL. Pass the video's source URL in a src parameter, and the script replaces the embedded video on the page.

See the demo page built in Unbounce.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.

Add the video swap to your page

1. Copy the script from Javascript to dynamically change an embedded video based on URL params on GitHub and add it to the JavaScripts section with placement set to Before Body End Tag.
2. Embed your default video with a Custom HTML element, not the video element. Use the video's iframe embed code.

3. Wrap the embed code in a div with the ID vid-container.

   

4. Add the following CSS to the Stylesheets section to set the video size:

<style>
  #vid-container {
   height: 315px;
  }
</style>

You can use any size. If you change it, make the same change in the script and in the iframe embed code so they match.

5. Build your page URLs. Copy the source URL from the embed code of each video and add it to the page URL as the src parameter. The following examples show where to find the source URL for each service.

   YouTube

   

   Wistia

   

   Vimeo

   

Test the change

Run an A/B test with a small share of traffic to confirm the change doesn't lower your conversion rate.