Skip to main content

Using a Custom Image For Wistia Pop Up Videos in Hubspot

By July 8, 2021May 20th, 2022Wistia and Hubspot
Wistia Pop Over Videos in Hubspot With Custom Image Link

About Wistia Video Hosting

We find that many of our clients use Wistia Video Hosting to track interactions with their video marketing efforts and get reporting on engagement. We find using Wistia and landing pages and inside Hubspot landing pages really easy to use as a marketing operations agency. If you want to check out their service click here to visit the Wistia website.

Your Wistia Video Pop Over Code

When you copy your embed code from Wistia select the version of the code that has a text link as the trigger to pop up the Wistia video. Your code should look like the image.

Sample Code

<script charset=“ISO-8859-1” src=“//fast.wistia.com/assets/external/E-v1.js” async></script> <div class=“wistia_embed wistia_async_5bbw8l7kl5 popover=true popoverContent=html” style=“display:inline-block; white-space:nowrap;” id=“wistia-5bbw8l7kl5-1”> <div id=“wistia_13.thumb_container” style=“position: relative; height: 18px; width: 34px;”> <div><span>Launch the popover!</span></div> </div></div>

Paste Your Code To a Text Editor For Later

Paste your code to a text editor for later. Hubspot is going to convert your code to shortcode and you will be using some of the original code after the main code has been converted. We personally like to use sublime edit for our text/code editor. It’s a free program if you want to grab a version. Click here for sublime text editor and yes it works on macs also.

Now Paste Your Code Into Hubspot

Find where you are going to want your video into your Hubspot landing page and paste it into a text area. Hubspot is going to convert your embed code into shortcode. You  can see this by clicking the Advanced tab then Source code on the top right of the text area in Hubspot

Hubspot Text Source Code

Now Your Code will Convert To Shortcode In Hubspot

Once you paste your video code into your Hubspot page Hubspot will change your code to a shortcode. We will be using a little extra code from your original code to wrap an image to be used as your video button trigger. Notice the code sections highlighted on the right. This is your video ID a unique id number generated by Wistia in your original code is now part of the shortcode.

Wista Sample Code

<script src=”https://fast.wistia.com/embed/medias/Hgdz4Rgdn9.jsonp” async></script><script src=”https://fast.wistia.com/assets/external/E-v1.js” async></script><div class=”wistia_responsive_padding” style=”padding:56.25% 0 0 0;position:relative;”><div class=”wistia_responsive_wrapper” style=”height:100%;left:0;position:absolute;top:0;width:100%;”><span class=”wistia_embed wistia_async_Hgdz4Rgdn9 popover=true popoverAnimateThumbnail=true popoverContent=link videoFoam=true” style=”display:inline;position:relative”><a href=”#”>This is my popover!</a></span></div></div>

Hubspot Shortcode

{{ script_embed(‘wistia’, ‘Hgdz4Rgdn9‘, ”, ‘popover,link’, ‘wistia’) }}

Your Final Wrapped Image Pop Over Link

To finish up take the span section from your original code and paste it into your HubSpot page under the shortcode. Ad the img src code to your page replacing the text this is a pop over.

Wista Sample Code

<script src=”https://fast.wistia.com/embed/medias/Hgdz4Rgdn9.jsonp” async></script><script src=”https://fast.wistia.com/assets/external/E-v1.js” async></script><div class=”wistia_responsive_padding” style=”padding:56.25% 0 0 0;position:relative;”><div class=”wistia_responsive_wrapper” style=”height:100%;left:0;position:absolute;top:0;width:100%;”><span class=”wistia_embed wistia_async_Hgdz4Rgdn9 popover=true popoverAnimateThumbnail=true popoverContent=link videoFoam=true” style=”display:inline;position:relative”><a href=”#”>This is my popover!</a></span></div></div>

Hubspot Shortcode

{{ script_embed(‘wistia’, ‘Hgdz4Rgdn9’, ”, ‘popover,link’, ‘wistia’) }}

Your Image Code Wrapped With Pop Up Link

{{ script_embed(‘wistia’, ‘Hgdz4Rgdn9’, ”, ‘popover,link’, ‘wistia’) }}

<span class=”wistia_embed wistia_async_Hgdz4Rgdn9 popover=true popoverAnimateThumbnail=true popoverContent=link videoFoam=true” style=”display:inline;position:relative”><a href=”#”>

<img src=”https://yourwebsite.com/images/image.jpeg”>

</a></span>