Two iframes with different dimensions on one page

[vadamovsky]

Is it possible to have two iframes with different dimensions on one page?

I can specify the dimensions of the iframe with:

.mfp-iframe-holder .mfp-content {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: 1280px;
    max-width: 1280px;
    height: 710px;
    margin: 20px auto;
}

But this will change the dimensions of all iframes at one page.

I have two links on one page and each link should open an iframe with a different dimensions.

In FancyBox I can specify the dimensions of every iframe with:

$(".fancybox1").fancybox({type: 'iframe', padding: 5, margin: 5, width: 1280, height: 710...
$(".fancybox2").fancybox({type: 'iframe', padding: 5, margin: 5, width: 800, height: 510...

But this doesn't work with Magnific Popup.

[vadamovsky]

The only workaround I was able to find is to change the dimension of the iframe after it is launched:

$(document).ready(function() {
        $('.popup-iframe1').magnificPopup({
          disableOn: 1200,
          type: 'iframe',
          mainClass: 'mfp-fade',
          removalDelay: 160,
          preloader: false,
          fixedContentPos: false,
          callbacks: {
            open: function() {
              var objs = document.getElementsByClassName("mfp-content");
              if (objs.length > 0) {
                var obj = objs[0];
                obj.style.width = "1200px";
                obj.style.maxWidth = "1200px";
                obj.style.height = "706px";
              }
            },
            close: function() {
            }
          }
        });
});