[Gather] How to allow Zendesk Community users to post embedded YouTube, Wistia or Vimeo Videos
The Wise One - 2022Community Moderator
已于 2018年2月06日 发布
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 条评论
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
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
Christopher Stallone
Is there a way to do this with Google Forms?
0
Vlad
Hi Camilo, I can help you with that. You can find my contact email on my profile page.
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
Hey uncle_joe 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
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 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
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 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
登录再写评论。