Recent searches


No recent searches

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



image avatar

Vlad

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

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


image avatar

Jennifer Rowe

Zendesk Documentation Team

Great tip, Vlad! Thanks for posting it!

0


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


image avatar

Vlad

The Wise One - 2022Community Moderator

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


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


image avatar

Vlad

The Wise One - 2022Community Moderator

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


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


image avatar

Vlad

The Wise One - 2022Community Moderator

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


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:

$(document).ready(function() {

console.log('hello');

});

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


image avatar

Vlad

The Wise One - 2022Community Moderator

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


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


image avatar

Vlad

The Wise One - 2022Community Moderator

Hi Camilo, I can help you with that. You can find my contact email on my profile page.

0


Is there a way to do this with Google Forms?

0


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


Hey All, 

Adding a tip for anyone who uses LotusThemes.

 

Vlad's code has “.comment-body”:

$('.comment-body p a[href*="vimeo"], .post-body a[href*="vimeo"]').each(function(){ 

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:

$('.post__text p a[href*="vimeo"], .post-body a[href*="vimeo"]').each(function(){ 

Once I replaced that, the script detected any vimeo link and displayed the video against the post.

0


Please sign in to leave a comment.

ADDITIONAL CONTENT

More about

Didn't find what you're looking for?

New post