Question

私はangle-youtube-embedをChrome Devツール（Googleデバイスモードの機能）と一緒に使用しています。私はyoutube要素の外観をテストしたかったのです。

私は

<div class="fixed-header my-video"> 
    <div style="padding:0px;"> 
     <youtube-video video-url='vm.videoUrl' player-vars="{controls : 0}" 
      player-width="'100%'" player-height="'180px;'"></youtube-video> 
    </div> 
</div> 

と私のCSSを持っているのです。

.my-video 
{ 
    height:180px; 
    width:100%; 
    position:absolute; 
    background:grey; 
    color:white; 
    text-align:center; 
    padding:0px; 
} 

と

.fixed-header{ 
margin-top:43px; 
} 

私はiPhone5のにデバイスモードを切り替えたときに今以上が正常に見えます。 iPhone6に切り替えると、ビデオの高さは180pxに設定されています（上記で定義したように）が小さく見えます。

iphone6の設定の高さは約207px（表示の高さの約31％）になります。

だから私は動作しますが、それはで

player-height='vm.height' // vm.height = "31vh" 

に（私のコントローラによって）私はそれを設定しても、私の角度 - ユーチューブ-埋め込む部品にそれを渡すない私のCSSの高さを31vh使用してみました実際、高さは150ピクセルに設定されています。

私の質問は、view-portの31％を占めるようにangular-youtube-embed要素の高さを設定する方法ですか？

Answer 1

使用メディアクエリ

@media (max-width: 1200px) { 
    .my-video { 
    height:360px; 
    width:100%; 

} 


@media (max-width: 600px) { 
    .my-video { 
    height:180px; 
    width:100%; 
} 

Answer 2

は％の年齢ではなく、ピクセル単位のように高さを使用してみてください。ピクセルの場合と同様に、特定の次元を指定しますが、％ageで指定すると、コンポーネントはウィンドウの相対サイズに基づいて調整されます

Answer 3

お手伝いをしてくださった皆様に感謝します。

Iは

vm.height = (0.5625 * $window.innerWidth); 

を設定し、これが動作し、16で（幅100％）の縦横比保持：9。