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中删除类＆＃34;视频容器＆＃34;并将其放入这样的div中

PARTITION ON

见下文

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

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

您是否尝试过此网址的答案？

Why is my embedded video not being responsive?

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

祝你好运。

更新：

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

我的坏。

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

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

3 个答案: