HTML埋め込みビデオをカットオフ

Question

私は自分のサイトにYouTubeからビデオを埋め込もうとしています。私は、ウィンドウのサイズに基づいて幅と高さを関連付ける方法があるのだろうかと思っています。たとえば、iPhoneではTHISのように見えます。ビデオの幅をディスプレイのサイズより小さくすることはできますか？どういうわけか、私のレスポンシブルサイトに結びつけることができますか？

これは、コンピュータやその他の大画面デバイスでは機能しますが、モバイルでは機能しません。

出典：助けを

<center><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe></center> 

Full page source

ありがとう！

[編集：ソース]

Answer 1

YouTubeのスタイル（CSS）をオーバーライドすることにより、応答性のYouTubeのビデオを埋め込むことが可能です。

次のCSS追加します。その後、

.video-con { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 

.video-con iframe, 
.video-con object, 
.video-con embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

そしてdivでiframeをラップ：

<div class="video-con"> 
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/zRDi1DT3AFA?rel=0" frameborder="0" allowfullscreen></iframe> 
</div>