埋め込みビデオが応答しないのはなぜですか？

Question

私はYouTubeからビデオを埋め込むためのこのスクリプトを持っています。動画はうまく再生されますが、動画を反応的にするために幅を％で設定できません。どのようにそれを行うことができますか？

<div class="video-container" id="VideoPlayer"></div> 

<script async src="https://www.youtube.com/iframe_api"></script> 
    <script> 
       function onYouTubeIframeAPIReady() { 
        var player; 
        player = new YT.Player('VideoPlayer', { 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
        width: 560,    // Player width (in px) 
        height: 400,    // Player height (in px) 
        playerVars: { 
         autoplay: 1,  // Auto-play the video on load 
         controls: 1,  // Show pause/play buttons in player 
         showinfo: 0,  // Hide the video title 
         modestbranding: 1, // Hide the Youtube Logo 
         loop: 5,   // Run the video in a loop 
         fs: 0,    // Hide the full screen button 
         cc_load_policy: 0, // Hide closed captions 
         iv_load_policy: 3, // Hide the Video Annotations 
         autohide: 0   // Hide video controls when playing 
        }, 
        events: { 
         onReady: function(e) { 
         e.target.mute(); 
         } 
        } 
        }); 
       } 

    </script> 

と、このCSS：

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

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

しかし、ビデオは応答していません。 CSSが効力を発揮していないようです。何が間違っているのですか？

Answer 1

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

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

<div class="video-container"> 
 
<div class="" id="VideoPlayer"></div> 
 
</div> 
 
<script async src="https://www.youtube.com/iframe_api"></script> 
 
    <script> 
 
       function onYouTubeIframeAPIReady() { 
 
        var player; 
 
        player = new YT.Player('VideoPlayer', { 
 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
 
        width: 560,    // Player width (in px) 
 
        height: 400,    // Player height (in px) 
 
        playerVars: { 
 
         autoplay: 1,  // Auto-play the video on load 
 
         controls: 1,  // Show pause/play buttons in player 
 
         showinfo: 0,  // Hide the video title 
 
         modestbranding: 1, // Hide the Youtube Logo 
 
         loop: 5,   // Run the video in a loop 
 
         fs: 0,    // Hide the full screen button 
 
         cc_load_policy: 0, // Hide closed captions 
 
         iv_load_policy: 3, // Hide the Video Annotations 
 
         autohide: 0   // Hide video controls when playing 
 
        }, 
 
        events: { 
 
         onReady: function(e) { 
 
         e.target.mute(); 
 
         } 
 
        } 
 
        }); 
 
       } 
 

 
    </script>

Answer 2

あなたの下を参照してくださいdivのJavascriptを狙っているからクラス "のビデオ・コンテナ" を削除し、この

<div class="video-container"> 
<div class="" id="VideoPlayer"></div> 
</div> 

のようにdivの中にそれを置きますビデオを含むdiv要素を別のコンテナに配置して、ページ上に配置する必要があります。 次に、cssを使用してビデオコンテナのサイズを変更できます。

がちなみにこのjsfiddle

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

.video-container { 
    width: 100%; 
    height: 100%; 
} 

<div class="container"> 
    <div class="video-container" id="VideoPlayer"></div> 
</div> 

<script async src="https://www.youtube.com/iframe_api"></script> 
    <script> 
       function onYouTubeIframeAPIReady() { 
        var player; 
        player = new YT.Player('VideoPlayer', { 
        videoId: 'yusGUGTVAyw', // YouTube Video ID 
        playerVars: { 
         autoplay: 1,  // Auto-play the video on load 
         controls: 1,  // Show pause/play buttons in player 
         showinfo: 0,  // Hide the video title 
         modestbranding: 1, // Hide the Youtube Logo 
         loop: 5,   // Run the video in a loop 
         fs: 0,    // Hide the full screen button 
         cc_load_policy: 0, // Hide closed captions 
         iv_load_policy: 3, // Hide the Video Annotations 
         autohide: 0   // Hide video controls when playing 
        }, 
        events: { 
         onReady: function(e) { 
         e.target.mute(); 
         } 
        } 
        }); 
       } 

    </script> 

を試してみてください、あなたはまた、ユーチューブのiframe API呼び出しで固定サイズを削除することができます。

Answer 3

このURLで回答を試みましたか？

Why is my embedded video not being responsive?

私は質問のタイトルが同じであるので、あなたのための答えがあると思います。

幸運。

UPDATE：リンクはあなた（スティーブ）による質問に対してですので

ああ、あなたは、この2（またはそれ以上）の時間を求めています。

私の悪いです。

あなたは正しい答えがあると思います。 この質問や別の質問を削除することもできます（自分で削除すると思うかもしれません）。