[Gather] How to allow Zendesk Community users to post embedded YouTube, Wistia or Vimeo Videos

14 Comments

  • Sheldon Grimm

    Hi Vladan,

    This is awesome. Works like a charm! 

    Definitely makes the posts feel more like a typical forum space. 

    Nice tip, thank you.

    Regards,

    Sheldon

    0
  • Jennifer Rowe
    Zendesk Documentation Team

    Great tip, Vlad! Thanks for posting it!

    0
  • cwillis

    Hi Vladan, 

    This is just what I was looking for.  We use Wistia and it's not working for me, could it be because we have a customer Wistia domain, e.g. https://hostanalytics.wistia.com/ ?

    Thanks in advance

    Craig

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    hey Craig, sorry for delayed reply, somehow I missed you comment!

    To be honest, I'm not very familiar with Wistia so I'm not quite sure what is the difference between "customer" and other domains. :/ If you can share your HelpCenter URL with me that would be helpful for checking!

    0
  • cwillis

    Hi Vladan,

    Thanks for getting back to me, our site is private, I could add you but would need your email address.

    As you can see from the screenshot below, the YouTube code is working, but the Wistia link remains a link.  Are you able to get that link to work?

    Craig

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey Craig, yes this will work.

    The key is that URL format is different.
    I just updated my original post so it support this kind of Wistia links format. Also, here is the code:

      // find all Wistia links in Community comments/posts and replace with an iframe 
    $('.comment-body p a[href*="wistia.com/medias/"], .post-body a[href*="wistia.com/medias/"]').each(function(){
    var url = $(this).attr('href');
    var video_id = url.split('medias/')[1];
    $(this).html('<p><iframe class="wistia_embed" src="//fast.wistia.net/embed/iframe/' + video_id + '" name="wistia_embed" width="560" height="315" frameborder="0" scrolling="no" allowfullscreen=""></iframe></p><script src="//fast.wistia.net/assets/external/E-v1.js" async=""></script>');
    });
    $('.comment-body p a[href*="wvideo"], .post-body a[href*="wvideo"]').each(function(){
    var url = $(this).attr('href');
    var video_id = url.split('=')[1];
    $(this).html('<p><iframe class="wistia_embed" src="//fast.wistia.net/embed/iframe/' + video_id + '" name="wistia_embed" width="560" height="315" frameborder="0" scrolling="no" allowfullscreen=""></iframe></p><script src="//fast.wistia.net/assets/external/E-v1.js" async=""></script>');
    });

     

    0
  • Jason K

    Hi Vladan

    Novice here. If we are using a Lotusthemes Zendesk theme and there is no document.ready in the JS file where would one paste the code?

    (*Edit)

    Just realized the theme is using document.on, does this change the procedure?

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey Jason, maybe the easiest way:
    Paste this code at the end of your theme JS file.

    $( document ).ready(function() {

    //here paste my code for YT or Vimeo or...

    });

    and don't forget to replace " //here paste my code for YT or Vimeo or..."  with the needed code.

    Hope this helps! 

    0
  • uncle_joe

    Can I ask if this is still working? I tried but can't get the document.ready function to fire, let alone display my Vimeo videos.

    At the end of the JS file I put this:

    $(document).ready(function() {

    console.log('hello');

    });

    But the console log remains blank. It's not even getting to the function.

    Or is there perhaps a script we can add to document.addEventListener('DOMContentLoaded', function() instead?

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hey @... it should still work. It's not easy to help from this point what could be the issue. Do you have any errors in your console? Maybe a screenshot would be helpful.

    0
  • Camilo Rodriguez

    Hi Vladan, Great post!

    I am not a technical person, can you recommend anyone that can help me implement this?

    A person or website or company....

    0
  • Vlad
    Community Moderator
    The Wise One - 2022

    Hi Camilo, I can help you with that. You can find my contact email on my profile page.

    0
  • Christopher Stallone

    Is there a way to do this with Google Forms?

    0
  • Dan Moore

    Vlad Thanks for posting this, fantastic functionality addition.  Please note that it seams as though YouTube is using an different posting method and I was wondering if you could point me in the right direction to utilize YouTube's YouTube Player API Reference for iframe Embeds.

    https://developers.google.com/youtube/iframe_api_reference 

    Any web page that uses the IFrame API must also implement the following JavaScript function:

    • onYouTubeIframeAPIReady – The API will call this function when the page has finished downloading the JavaScript for the player API, which enables you to then use the API on your page. Thus, this function might create the player objects that you want to display when the page loads.

    Any assistance for the code you can provide would be much appreciated!

    1

Please sign in to leave a comment.

Powered by Zendesk