Как стиль всплывающего окна iframe в Magnific Pop-Up?

Question

Я хочу показать iframe, как в http://chesstao.com/test.php (щелкните зеленую рамку). Но я не вижу метода или класса для стиля высоты и ширины iframe.

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

в ЯШ:

<!--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 всплывающего фрейма? Я сбит с толку. Вышеупомянутый стиль просто игнорируется.

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