Struggling with embedding Wistia video

Hello,
I’m trying to embed a Wistia video and I’m struggling.
Currently, I have a Bricks 1.9.9 with this system information below

I tried all the sharing options available and the video doesn’t work at all.

  • Plugins disabled (including cache plugins) = doesn’t work
  • Tested in a simple page = doesn’t work
  • Tried an embedded Youtube video = this code works

Can anyone have the same experience or some advice about this issue?

Thank you so much in advance.

Hey Marco,

can you show how exactly you’re trying to embed the video? I followed their example here and it works as expected for me.

Best,

André

Thank you for your reply.

So here is an example of a version found, and it works however the customisation is more complicated because I can’t modify the script like a code provided by Wistia. The good thing is that I can add a custom thumb image (gif):

At this link: Rise Program – call – Elevating Origins

<div class="video">
<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
<script src="https://fast.wistia.com/embed/medias/8hfnsm85ri.jsonp" async></script>
<div class="overlay-play wistia_embed wistia_async_8hfnsm85ri popover=true popoverAnimateThumbnail=true popoverContent=link videoFoam=true"></div>
<img src="https://www.elevatingorigins.com/site/wp-content/uploads/2024/07/loop-video-wistia.gif" alt="video">
</div>

<style>
.video {
   position:relative;
   width:100%;
   margin:0 auto;
}
.video img {
   width:600px;
}
.overlay-play:hover {
	cursor:pointer;
	background-color:transparent;
}
.overlay-play {
    background: url(https://www.elevatingorigins.com/site/wp-content/uploads/2024/07/Play-button-.png) no-repeat center center;
    background-size: 100%;
    height: 235px;
		width: 100%;
    z-index: 9;
		background-color: rgba(0, 0, 0, 0.2);
		position:absolute;
	}
</style>



And below, the two options provided by Wistia which don’t work:

OPT 1:

<script src="https://fast.wistia.com/embed/medias/8hfnsm85ri.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%;"><div class="wistia_embed wistia_async_8hfnsm85ri seo=true videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/8hfnsm85ri/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

OPT 2:

<script src="https://fast.wistia.com/embed/medias/8hfnsm85ri.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_8hfnsm85ri popover=true videoFoam=true" style="display:inline-block;height:100%;position:relative;width:100%">&nbsp;</span></div></div>




This is what I see in this other page: Evolve Program – call – Elevating Origins

Thank you