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

【问题标题】：Why is my embedded video not being responsive?为什么我的嵌入视频没有响应？
【发布时间】：2017-09-20 14:07:51
【问题描述】：

我有这个脚本可以嵌入来自 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没有生效。我做错了什么？

【问题讨论】：

标签： javascript css youtube youtube-api youtube-iframe-api

【解决方案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>

【讨论】：

【解决方案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调用中去掉固定大小。

【讨论】：

【解决方案3】：

你试过这个网址的答案吗？

Why is my embedded video not being responsive?

我想你有答案，因为问题的标题是一样的。

祝你好运。

更新：

哦，你已经问过这个问题了 2 次（或更多），因为这个链接是你（史蒂夫）提问的。

我的错。

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

【讨论】：