Support » Plugin: AMP » Wistia videos on AMP pages

  • Resolved HolaEffect

    (@holaeffect)


    AMP should support embedding of Wistia videos, but it doesn’t seem to be working yet.

    We use OEmbed in WordPress, simply pasting the Wistia URL in the editor. This shows the video properly in the WordPress article, but the AMP page does not show the video. The relevant script and AMP elements are not added to the page.

    How can we make Wistia videos work on AMP pages?

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    Rather than using the oEmbed have you tried using the Wistia component by adding markup similar to the below to your content? If using the standard Wistia oEmbed the E-v1.js resource is not AMP compatible, with restrictions on custom JavaScript.

    <amp-wistia-player
      data-media-hashed-id="u8p9wq6mq8"
      width="512"
      height="360"
    ></amp-wistia-player> 

    You’ll find out more on the Wistia AMP component resource. You can also test out that snippet above with modifications within your own content, or by adding the marking into an AMP playground document.

    Thread Starter HolaEffect

    (@holaeffect)

    Hey James,

    Thank you for the quick response.

    I am aware that the markup you posted is what is necessary to show a Wistia video in AMP. But isn’t the point of the AMP plugin that it will convert a WordPress post to a valid AMP post? Or do I manually need to create these AMP pages? If so, how do I even do that?

    Plugin Author Weston Ruter

    (@westonruter)

    What is needed is a plugin that converts Wistia oEmbed responses into amp-wistia-player components. I did this for another video provider, namely Vidyard. See: https://gist.github.com/westonruter/db093fd74797a965fbb4f3af232db47c

    The same thing can be done for Wistia.

    @holaeffect Are you using a plugin to add non-AMP Wistia oEmbed support? That plugin may need to be extended (with another plugin) like I did for the Vidyard one. I’m guessing you have a plugin that is adding Wistia the oEmbed allowlist, as shown in the Wistia docs.

    @milindmore22 Would you please assist make a plugin that does this?

    Plugin Support Milind More

    (@milindmore22)

    I created an issue on their git repo, I will send PR to support it. Hopefully they are responsive.
    In the meantime, I will create a small compatibility plugin.

    Thread Starter HolaEffect

    (@holaeffect)

    You guys are great!

    @westonruter, I don’t use a plugin to add the oembed support. I’ve just added the necessary line myself:
    wp_oembed_add_provider( '/https?:\/\/(.+)?(wistia.com|wi.st)\/(medias|embed)\/.*/', 'http://fast.wistia.com/oembed', true);

    • This reply was modified 9 months, 4 weeks ago by HolaEffect.
    Plugin Support Milind More

    (@milindmore22)

    @holaeffect
    You may use this compatibility plugin for Wisitia Embed Compatibility.

    Please note the plugin also has oEmbed support for wistia

    please follow the instruction to install the plugin

    • Download it as zip file.
    • Goto Plugins -> Add New -> Upload plugin
    • Choose file and click upload
    • Activate the plugin

    Please do let me know if you face any further issues.

    Thread Starter HolaEffect

    (@holaeffect)

    Thank you for the super fast response.

    I’ve activated the plugin (and cleared WP Rocket cache afterwards) but the AMP page has not changed yet.

    See: https://markmanson.net/why-you-fail/amp

    The video should show below the featured image.

    Any idea what may be the problem?

    Plugin Support Milind More

    (@milindmore22)

    @holaeffect Sorry forgot to mention you that you need to enter oembed URL
    which can be generated by clicking Oembed support in your wisita embed screen

    if you are using classic editor directly paste the URL, if you are using Gutenberg editor use embed block

    • This reply was modified 9 months, 4 weeks ago by Milind More.
    Thread Starter HolaEffect

    (@holaeffect)

    I think I already use that type of URL. Here’s what’s in the (classic) editor:

    https://markmanson-1.wistia.com/medias/d282i2q4hg?embedType=async&videoFoam=true&videoWidth=800

    Plugin Support Milind More

    (@milindmore22)

    Yup, correct that’s the one, I tried the same URL and it’s working on my local

    here is what you can try in the classic editor.

    
    <div class="video-container">
    
    [embed]https://markmanson-1.wistia.com/medias/d282i2q4hg?embedType=async&videoFoam=true&videoWidth=800[/embed]
    
    </div>
    
    Thread Starter HolaEffect

    (@holaeffect)

    No idea why, but when I had the plugin installed and activated, the code didn’t execute (despite it being active. I did some debugging and when I then copied the code over to functions.php, WP errored because the functions were defined twice).

    After only running your code in functions.php, things worked perfectly.

    Plugin Support Milind More

    (@milindmore22)

    @holaeffect Thanks for the update, hmm seems strange.

    Can you please let me know what was the WP error, it will help debug the issue and make the compatibility plugin better for the next user.

    Thread Starter HolaEffect

    (@holaeffect)

    The WP error was not due to any code in the plugin.

    I got an error when I tried to run a function in functions.php that I had also defined in the plugin file. So what this shows was that, although somehow the code in the plugin was not executing, it was being read by WordPress. Somehow. Again, not sure why.

    For me, the important part now is that by simply pasting your plugin code into my functions.php (and deactivating the plugin), everything worked.

    • This reply was modified 9 months, 3 weeks ago by HolaEffect.
    Plugin Support Milind More

    (@milindmore22)

    I hope the solution we provided helped you fix the issue, I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Wistia videos on AMP pages’ is closed to new replies.