Video.js: How to add HTML content inside a ModalDialog?

[borzaka]

I would like to add HTML content to the ModalDialog:

var modal_content = '<div id="do-this">do this</div> <div id="do-that">do that</div>';

var ModalDialog = videojs.getComponent('ModalDialog');
var modal = new ModalDialog(player, {
    content: modal_content,
    temporary: false
});

But the output will be just text like this: <div id="do-this">do this</div> <div id="do-that">do that</div>

I'am planning to add a click function to the created elements later without any jQuery. Should I use Component or getElementById or something else? The clickable elements would be more complex than this example. The click event would close the modal, and do something based on the clicked element.

[gkatsev]

To minimize the changes of XSS attacks via the ModalDialog, we do not render the content out as HTML when given a string. However, you can create the element yourself and pass it along and the modal dialog will adopt that element. A simple example:

var modal_content = '<div id="do-this">do this</div> <div id="do-that">do that</div>';

// where the magic happens
var contentEl = document.createElement('div');
// probably better to just build the entire thing via DOM methods
contentEl.innerHTML = modal_content;

var ModalDialog = videojs.getComponent('ModalDialog');
var modal = new ModalDialog(player, {
    content: contentEl,
    temporary: false
});

Hope that helps.

[borzaka]

Thank you so much!
I ended up creating two ClickableComponent components, and add them at the first time of the modal's modalopen event to prevent the empty() method clear it during opening:

modal.one('modalopen', function() {
    this.addChild('do_this', {});
    this.addChild('do_that', {});
});

[Amy0714Angela]

I use the code that gkatsev recommend,it worked.But when I drag the controll bar,the modal content will show up and then disappear,I've tried to change temporary from false to true,it doesn't work.
http://jsrun.net/4igKp drag the controll bar ,you'll see the issue

[borzaka]

Try using a newer version of video.js. The latest 5.x is 5.20.5 (currently, you are using 5.18.4).

[BenJackGill]

Hey guys,

I'm having trouble doing this also. I'm a bit of a JS novice but I'm trying to make the modal appear (with HTML) when the pause button is clicked. And then resume playing when closed.

This is what I have so far, but nothing shows when pausing the video.

Any ideas what's wrong?

var player = videojs('my-player');

player.on('pause', function() {

  var modal_content = '<div class="mcwidget-embed" data-widget-id="999999"></div>';

  // where the magic happens
  var contentEl = document.createElement('div');
  // probably better to just build the entire thing via DOM methods
  contentEl.innerHTML = modal_content;

  var ModalDialog = videojs.getComponent('ModalDialog');
  var modal = new ModalDialog(player, {
      content: contentEl,
      temporary: false
  });

  // When the modal closes, resume playback.
  modal.on('modalclose', function() {
    player.play();
  });

});

[salihkiraz]

 var player = videojs('my-video');
    player.on('pause', function() {

        // Modals are temporary by default. They dispose themselves when they are
        // closed; so, we can create a new one each time the player is paused and
        // not worry about leaving extra nodes hanging around.

        var modal_content = '<div class="mcwidget-embed" data-widget-id="999999">asdasd asdasd</div><button>asdasd</button>';

        // where the magic happens
        var contentEl = document.createElement('div');
        // probably better to just build the entire thing via DOM methods
        contentEl.innerHTML = modal_content;

        var modal = player.createModal(contentEl);

        // When the modal closes, resume playback.
        modal.on('modalclose', function() {
            player.play();
        });
    });