2017-11-27 7 views
0
<iframe width="1280" height="720" scr="https://https://www.youtube.com/embed/_lE1GYParQA" frameborder="0" allowfullscreen> 

のiFrameに相対的な位置を適用する方法を

.container { 
    width: 80%; 
    margin: auto; 
    overflow: hidden; 
} 

#showcase { 
    margin-top: 5px; 
    min-height: 450px; 
    text-align: center; 
    background: url('../Pictures/Showcase.png') no-repeat 0 -280px; 
    color: #000; 
    border: 2px; 
} 

#Video { 
    margin: 0 auto; 
    position: relative; 
    height: 0; 
    max-width: 1280px; 
    max-height: 720px; 
    overflow: hidden; 
    padding-top: 10px; 
    padding-bottom: 56.25%; 
    /* 16x9 aspect ratio */ 
    border: 2px blue solid; 
} 

#video iframe { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

https://jsfiddle.net/7xt8mccu/ IVEはユーチューブビデオの画像で16×9で行くサイズは変更されません相対IFRAMEを持って、そこまでの方法です画面が小さくなるとそのimgのサイズを変更しますか? アドバンスドありがとう

+0

疑問コードヘルプには、疑問そのものの中で** **好ましくは** Stack Snippet **でそれを再現するのに必要な最短コードを含める必要があります。あなたがリンクを提供したにもかかわらず、それが無効になるのであれば、あなたの質問は、同じ問題を抱える将来の他のSOユーザにとっては価値がないでしょう。 [**私のウェブサイトの何かが動作しないのは、リンクを貼り付けるだけです**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-リンクを張ることはできません)。 –

+0

私は入力ミスとして閉じることにしました。 – TylerH

答えて

2

あなたのコードは動作します。あなたはちょうど間違いを犯しました。あなたのCSSで

#Video iframe { 

(資本V)で

#video iframe { 

を交換し、それが動作します。 https://jsfiddle.net/ns1mrfy5/

関連する問題