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

Just noticed this post and decided to write this short tip how to achieve that your users can post embedded YouTube, Wistia, Vimeo videos in Community posts/comments.

All you need to do is to paste the following code into your theme script file (1) after the start line of document.ready function (2), like in the image below:

Here is the Youtube code:

 // find all YT links in Community comments and replace with YT iframe 
$('.comment-body p a[href^="https://www.youtube.com/"], .post-body a[href^="https://www.youtube.com/"]').each(function(){ 
 var url = $(this).attr('href'); 
 function getId(url) {
 var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
 var match = url.match(regExp);
 if (match && match[2].length == 11) {
 return match[2];
 } else {
 return 'error';
 }
 }

 var myId = getId(url);
 $(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
}); 

 

It will grab all YT links from Community comments/posts and create an iframe from.

Pretty the same thing for Vimeo and Wistia videos. Here is the code for Vimeo:

// find all Vimeo links in Community comments/posts and replace with an iframe 
  $('.comment-body p a[href*="vimeo"], .post-body a[href*="vimeo"]').each(function(){ 
var url = $(this).attr('href'); 
    function getVimeoId(url) {
    var m = url.match(/^.+vimeo.com\/(.*\/)?([^#\?]*)/);
    return m ? m[2] || m[1] : null;
}

var myId = getVimeoId(url);
  console.log(myId);
$(this).html('<div style="padding:330px 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/' + myId + '" style="position:absolute;top:0;left:0;width:560px;height:315px;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>');
});

And Wistia:

  // 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>');
});

 

 

How it looks on my test account:

and how it looked before the change was implemented:

 

Hope this helps ;)