为什么我的嵌入式视频无法响应？

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（或更多）的时间，因为链接是由你（史蒂夫）的问题。

我的不好。

我认为你有正确的答案。 也许你可以删除这个问题或另一个问题（你可以认为你自己，你删除或不）。