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

8 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

    1
  • Jennifer Rowe

    Great tip, Vlad! Thanks for posting it!

    3
  • Craig Willis

    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
  • Vladan Jovic

    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
  • Craig Willis

    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
  • Vladan Jovic

    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 Kaiser

    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
  • Vladan Jovic

    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

Please sign in to leave a comment.

Powered by Zendesk