Using VTurb with ClickMax

In this guide, you'll learn how to seamlessly integrate VTurb with ClickMax for optimal video embedding on your site.

Let’s dive right in:

Accessing VTurb’s Dashboard:
- Once you're logged into VTurb, you'll come across a dashboard displaying all your videos.
- Locate the </> icon to proceed with copying the JS code.
- Simply click on the code to copy it.



Embedding the Video:
- The previously copied JS code is now ready to be pasted. Head over to ClickMax and locate the box titled ‘Product Video' under the 'Block Data' section. Here, you'll paste the JS code.



Adjusting the Video's Dimensions:

- To ensure the video fits perfectly and doesn't interfere with other elements on the page, you'll need to add the following styling code:

<style>
.ratio-16x9{
    --bs-aspect-ratio: 0px !important;
}
.smartplayer-call-action {
    position: relative !important;
}
.smartplayer-headline{
    position: relative !important;
}
</style>

By inserting this code, you're customizing the video's height and ensuring that certain elements, like calls to action and headlines, are correctly positioned relative to the video.

Final Touches:
- All that’s left is to save the configurations you've set up, and you're good to go!

💡A friendly reminder: Always prioritize security. Ensure you add your domain(s) under the 'Security' tab for that added layer of protection for your content.

Now, sit back and watch your video in all its glory on your site!

Want to dive deeper? Check out:

The nitty-gritty of Iframe vs. JS code

Learn how to use VTurb in your page builder!

Updated on: 10/18/2023