Recent searches
No recent searches
[Gather] How to allow Zendesk Community users to post embedded YouTube, Wistia or Vimeo Videos
The Wise One - 2022Community Moderator
Posted Feb 06, 2018
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 ;)
3
15
15 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
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
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
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:
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
Hey Jason, maybe the easiest way:
Paste this code at the end of your theme JS file.
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:
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
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
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
Jesse H
Hey All,
Adding a tip for anyone who uses LotusThemes.
Vlad's code has “.comment-body”:
Find your equivalent in the LotusTheme you use then replace it (tip: right-click and inspect element works a charm)
Example: In the theme we use, it's “post__text” and would look like this:
Once I replaced that, the script detected any vimeo link and displayed the video against the post.
0