特定のアスペクト比を持つfancyBoxを開く

Question

サイズ変更可能なfancyBoxを特定のアスペクト比（たとえば16：9）で開く方法を知っている人はいますか？

Answer 1

純粋なCSSソリューションもあります。サイズを変更しても機能します。

.fancybox-type-iframe .fancybox-inner{ 
    padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */ 
    height: 0 !important; 
} 

.fancybox-type-iframe .fancybox-inner .fancybox-iframe{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

私はあなたがfancyboxで表示されるビデオに必要と仮定しています。したがってiframe関連のCSS。

P.S.私はこのスレッドが古いことを知っています。しかし、誰かが解決策を必要としているかもしれません。

Answer 2

現在、AFAIK、Fancyboxはこれをサポートしていません。しかし、ファンシーボックスサイズの寸法を制御することができます

("#yourbox").fancybox({ 
    'width'    : 680, 
    'height'    495, 
    'showCloseButton' : false, 
    'titlePosition'  : 'inside', 
    'titleFormat'  : formatTitle 
}); 

Answer 3

簡単にFancyboxのサイズを変更するネイティブな方法はありません。 screen.heightで簡単な数式を使って、現在の画面解像度に対して特定のアスペクト比でFancyboxを開くことができます。

var height = screen.height/4; 

$("#test").fancybox({ 
      'width' : 16/9. * height, 
      'height' : height, 
      'autoDimensions' : false 
     }); 
}); 

Answer 4

ファンシーボックス3で動作する応答性の高いYouTubeポップアップのための純粋なCSSソリューションです。scssで明瞭に書かれていますが、scssに慣れていない場合はオンラインでcssに変換できます。

.fancybox-slide--iframe { 

    .fancybox-content{ 
     margin: 0!important; 
     max-width: 100%; 
     width: 100%; 
     padding-top: 56.2%; /* (9/16 * 100%) -- your aspect ratio in percents */ 
     height: 0 !important; 

     /* don't go full width on wide screens */ 
     @media all and (min-width: 800px) { 
      max-width: 70%; 
      width: 70%; 
      padding-top: 39.34%; /* (9/16 * 70%) -- smaller aspect ratio in percents */ 
     } 

     .fancybox-iframe{ 
      position: absolute; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
     } 

    } 
}