Not able to override inline markup

[danyj]

I am creating a gallery that can display all magnific types , images, iframes, inlines.
Modifying images and iframes markup works fine but I am not able to change the inline

fiddle , https://jsfiddle.net/v572re9g/2/

$('.popup-gallery a').magnificPopup({
  type: 'image',
  gallery: {
    enabled: true,
    navigateByImgClick: true,
  },
  midClick: true,


  image: {
    markup: '<div class="mfp-figure">' +
      '<div class="mfp-close"></div>' +
      '<div class="mfp-img"></div>' +
      '</div>' +
      '<div class="mfp-bottom-bar">' +
      '<div class="mfp-title"></div>' +
      '<div class="mfp-counter"></div>' +
      '</div>'
  },
  inline: {
    markup: '<div class="mfp-close"></div>' +
      '<div class="mfp-content"></div>' +
      '<div class="mfp-bottom-bar">' +
      '<div class="mfp-title"></div>' +
      '<div class="mfp-counter"></div>' +
      '</div>'
  },
  iframe: {
    markup: '<div class="mfp-iframe-scaler mfp-with-anim">' +
      '<div class="mfp-close"></div>' +
      '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>' +
      '</div>' +
      '<div class="mfp-bottom-bar">' +
      '<div class="mfp-title"></div>' +
      '<div class="mfp-counter"></div>' +
      '</div>'
  }
});

any help is appreciated