Modifying a Custom Module for Video

dchambers
Participant

I have a custom module on our webpage from a previous designer that I would like to modify. Please see the attached html coding and picture of how it looks when editing the specific output.

 

<div class="half-width video-launcher">
<a href="{{ widget.video_url }}" target="_blank" rel="noopener" class="play-button video-link wistia-popover[height=360,playerColor=EAE522,width=640]"><img src="http://cdn2.hubspot.net/hub/441594/file-2525499161-png/assets/images/button-play.png" alt="Play"></a>
<div class="bottom-content">
<div class="info">
<summary>{{ widget.video_headline }}</summary>
<a href="{{ widget.video_learn_more_link }}" class="learn-more">Learn More</a>
</div>
</div>
{% if widget.video_corner_logo.src %}
<img src="{{ widget.video_corner_logo.src }}" alt="{{ widget.video_corner_logo.alt }}" class="corner-logo">
{% endif %}
<div class="overlay"{% if widget.overlay_image.src %} style="background-image:url('{{ widget.overlay_image.src }}')"{% endif %}></div>
</div>

 

I want to change the "Video URL" section to be a Wistia Inline Embed Code section instead. I don't want it to go to Wistia when the user clicks on it. Instead, I want the video to simply play when they click the yellow play button. I've been having some issues doing it myself, and I'd love some help. 

 

Half Width Video Launcher in ActionHalf Width Video Launcher in Action

0 Upvotes
3 Replies 3
dchambers
Participant

The reason I am attempting to do this is because SEMRush is giving me an error that "2 resources are formatted as page link, because I have the video uploaded to Hubspot files and it is linked through a resource.

 

My thought on correcting this was to move the video to Wistia and embed it. If you have another solution, I'm all ears.

 

For your reference, the website is here.

0 Upvotes
DanielSanchez
Key Advisor

Hi @dchambers 

 

I think u can create one text field in your módule (Design Manager), to paste the code of Wistia, and use value of this field to print the code in your html code. Look one example:

 

I create one text field in my module, and print this snippet in my html code.

field.PNG

 

And now, u can paste embed codes in this field to show the videos. Bellow one example of an Youtube video embeded.

preview.PNG

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

 

0 Upvotes
dchambers
Participant

I tried changing it from an a href to what you suggested, and this was the result.

Results of Change.png

0 Upvotes