JS error on page but not on template causing functionality to not work

Developer Support CMS Development
1

I have these scripts that launch a video overlay when a button is clicked on my homepage

Script in template head

<script src="https://fast.wistia.com/embed/medias/ci1kb2r0is.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

Button HTML on template

<p><span class="wistia_embed wistia_async_ci1kb2r0is popover=true popoverContent=link" style="display: inline; position: relative;"><a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;"></a></span></p>

This works fine on the template and when I preview the template.
However when editing the page, Hubspot changes the HTML automatically to the following

button HTML on page editor

<div id="wistia_47.thumb_container" class="wistia_click_to_play" style="position: relative; display: inline;"><a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;"></a></div>

and the functionality does not work. Instead I get the following error:

javascript error .jpg
javascript error .jpg1814×900 283 KB

How can I fix so the functionality on the page matches that of the template?

2

Hi @DylanPress - Can you try changing the span to a div and remove the wrapping <p> tag and see if that works?

<div class="wistia_embed wistia_async_ci1kb2r0is popover=true popoverContent=link" style="display: inline; position: relative;">
 <a class="shadow-box btn btn-green" style="display: inline-block;" href="#">HOW AVANAN WORKS <img src="https://www.avanan.com/hubfs/play-button-1.png" alt="" title="play-button.png" width="25" style="width: 25px;">
 </a>
</div>

If this answer helped, please, mark as solved :grinning_face_with_smiling_eyes:

tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me on slack.