Customizing Video Templates

[enesemini]

Hello Ritesh,

I'm at the process of making a custom template for the different video embeds for my application.

While changing the template it self turned out to be pretty easy (example below with youtube):

ejs.template.detailsYoutube = function(data, fullData, embedUrl){
  return '<div>' + embedUrl  + '</div>'; // this template only shows the embed link as an example
}

Now I am struggling to get the right functionality with clicking the video thumbnail and letting it play.

The code responsible for this should be these two parts:

(embed.js around line 300)

play: function play(className, options) {
    var _this = this;

    var classes = document.getElementsByClassName(className);

    var _loop = function _loop(i) {
        classes[i].onclick = function () {
            options.onVideoShow();
            var url = classes[i].getAttribute('data-ejs-url') + "?autoplay=true";
            classes[i].parentNode.parentNode.innerHTML = _this.template(url, options);
        };
    };

    for (var i = 0; i < classes.length; i++) {
        _loop(i);
    }
},

And at line 3304 the function is called. But in order for it to work I would have to use the 'ejs-video-thumb' class:

helper.play('ejs-video-thumb', this.options);

So here are my questions:

1. How can I initialize the play function with another class name, without changing the source file?
2. And how can I customize the play function? Because in the default case, it goes up two levels, whereas in my case I need it to go up two more levels, before it can replace the content with the actual iframe.

Once again, thank you for your effort.

Kind regards,
Enes Emini

[ritz078]

Hi @enesemini ,
Just added it on es6 branch.

Here are steps:
In options pass:

videoClickClass : 'ejs-video-thumb',  // custom class name
customVideoClickHandler : true,
videoClickHandler : function (options, template) {
  // write your function here. This will be executed when someone click the passed className
 // template(url, options) returns the final (only video) template string.
}

I hope this solves both your issues. Let me know if this works fine so that i can merge this to master.

[enesemini]

Hey @ritz078,

Thank you for your quick reply. I'm having a little trouble getting it to work.

I replaced the old embed.min.js with the new one from the es6 branch, and I added the new options, but I'm getting the following error in the browser console:

I'm applying the following options:

ejs.setOptions({

  videoClickClass: 'video-play', // custom class name
  customVideoClickHandler: true,
  videoClickHandler: function(className, options) {

    // write your function here. This will be executed when someone click the passed className
    // template(url, options) returns the final (only video) template string.
    var _this = this;

    var classes = document.getElementsByClassName(className);

    var _loop = function _loop(i) {
      classes[i].onclick = function () {
        options.onVideoShow();
        var url = classes[i].getAttribute('data-ejs-url') + "?autoplay=true";
        classes[i].parentNode.parentNode.innerHTML = _this.template(url, options);
      };
    };

    for (var i = 0; i < classes.length; i++) {
      _loop(i);
    }

  }
});

[ritz078]

My bad that was an error in the function name. Fixed it. Now it should work fine.

[enesemini]

You are AMAZING. It's working now.

Thank you very much for your very fast support!!

[ghost]

Yes ritz078 is amazing! :)

[ritz078]

@enesemini Great.
@comtronix its been long 😄

[ghost]

What is/was long?

[ritz078]

@comtronix In one word : Thanks 😄 Lets conclude this thread as the issue has been resolved. Cheers.