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

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 没有服用 effect.What 我做错了吗？

Answer 1

从 div 中删除 class "video-container" 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?

我认为有适合你的答案，因为问题标题相同。

祝你好运。

更新：

哦，你已经问了 2 次（或更多）次，因为 link 是你 (Steve) 的问题。

我的错。

我认为你的答案是正确的。也许你可以删除这个问题或另一个问题（你可以自己考虑是否删除）。

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

Why is my embedded video not being responsive?

javascript

css

youtube

youtube-api

youtube-iframe-api