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

SOLVE
DylanPress
Member

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 .png

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

0 Upvotes
1 Accepted solution

Accepted Solutions
tjoyce
Solution
Recognized Expert | Platinum Partner

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 😄


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

 

Drop by and say Hi to me on slack.

View solution in original post

0 Upvotes
1 Reply 1
tjoyce
Solution
Recognized Expert | Platinum Partner

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 😄


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

 

Drop by and say Hi to me on slack.

View solution in original post

0 Upvotes