マグニフィックポップアップでポップアップのiframeをどのようにスタイルできますか？

Question

http://chesstao.com/test.phpのようにiframeを表示したい（緑色のボックスをクリック）。しかし、私はiframeの高さと幅をスタイルするメソッドやクラスは見当たりません。

HTML: <div> 
<a href="games/header-test.php?game=aveskulov" class="my-popup iframe-link">Show iframe popup</a> 
</div> 

JS：

<!--Magnific-popup--> 
<script src="//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/0.8.9/jquery.magnific-popup.min.js" ></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

$('.iframe-link').magnificPopup({type:'iframe'}); 

});</script> 

CSS：

.my-popup {height:900px; width:1200px} 

にはどうすればmagnificポップアップIFRAMEのスタイル（高さと幅）をコーディングすることができますか？私はうんざりしています。上記のスタイルは単に無視されます。

Answer 1

これは完全な回答ではありませんが、役立つ可能性があります。

はこのような何かにあなたのオプションを変更し

：

$('.iframe-link').magnificPopup({ 
    type: 'iframe', 
    iframe: { 
     markup: '<div class="mfp-iframe-scaler your-special-css-class">'+ 
         '<div class="mfp-close"></div>'+ 
         '<iframe class="mfp-iframe" frameborder="0" allowfullscreen>   </iframe>'+ 
        '</div>' 
    } 

}); 

を次にあなたはクラスがこのような何かをCSSで：

.your-special-css-class { 
    max-width: 320px !important; 
    height: 85%; 
    margin: auto; 
    max-height: 780px; 
    padding: 140% 16px 0 13px !important; 
} 

高さを調整するための重要な部分は、パディングです....

Answer 2

$(document).ready(function() { 
    $('.open-popup-link').magnificPopup({ 
     type: 'iframe', 
     iframe: { 
      markup: '<style>.mfp-iframe-holder .mfp-content {max-width: 900px;height:500px}</style>'+ 
        '<div class="mfp-iframe-scaler" >'+ 
        '<div class="mfp-close"></div>'+ 
        '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ 
        '</div></div>' 
     } 
    }); 
    }); 

Answer 3

ポップアップコールの後にこれを追加すると、私のためにそれが追加されました：

$('.mfp-content').css('height','100%'); 

これにより、CSSを変更する必要がなくなり、必要に応じて高さを変えることができます。一緒に使用

alignTop: true