爲什麼我的嵌入式視頻無法響應？

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

取下DIV的JavaScript瞄準的是類 「視頻容器」，並把它放在一個div像這樣

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

見下

.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元素放置在單獨的容器中，以便在頁面上進行定位。 然後，您可以使用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> 

順便說一句，你還可以去除在YouTube上的iframe API調用的固定大小。

Answer 3

你試過這個URL的答案嗎？

Why is my embedded video not being responsive?

我認爲這是爲你解答，因爲問題的標題是一樣的。

祝你好運。

UPDATE：

哦，你問這個2（或更多）的時間，因爲鏈接是由你（史蒂夫）的問題。

我的不好。

我認爲你有正確的答案。 也許你可以刪除這個問題或另一個問題（你可以認爲你自己，你刪除或不）。