Wistia Embed Larger than Page View

Themes
1

Hi, I tried just pasting the link of a Wistia video into the editor, and it shows up fine. But when displaying in the Lyra Theme - it goes beyond the pages width.

Here’s where you can see what’s happening: https://jpmartin.com/key-investor-metric/

Here’s inside the editor: https://jpm.me/aKSBUW

Is wistia not supported by Ghost? Or is there something I can fix via css?

2

Add this piece of code into your site header code injection area and it should fit into the space better:

<style>
.wistia_embed {
    width: 100%;
}
</style>
1 Like
3

Thanks @DavidDarnes - that worked! But I still see the black envelopes at the top and bottom. Is there a fix similar to youtube videos, where they fit just right?

4

In that case you’ll need to make some modifications to the theme. If you download your theme and locate the file jquery.fitvids.js (will be in assets/js/ ) and open it in a code editor. Fine the following line of code:

…and update it to this:

        'iframe[src*="kickstarter.com"][src*="video.html"]',
        'iframe[src*="wistia.net"]',
        'object',

Save those changes, zip the theme up and upload it back onto your site. After that you can probably remove the styles I gave you before, as it should now behave exactly like YouTube videos :sparkles:

2 Likes
5

Brilliant - did the trick! Thank you!

1 Like