javascript - 为什么我的嵌入式视频没有响应？

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

从 javascript 定位的 div 中删除类“video-container”并将其放入这样的 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>