[Gather] How to allow Zendesk Community users to post embedded YouTube, Wistia or Vimeo Videos
Just noticed thispostand 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 theYoutubecode:
// 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');
getId (u函数rl) {
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('');
});
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 forVimeo:
// 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);
$ () . html(“< div风格= "填充:330 px 0 0 0;及tion:relative;">
});
AndWistia:
// 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('');
});
$('.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('');
});
How it looks on my test account:
and how it looked before the change was implemented:
Hope this helps ;)
14 Comments