响应Youtube

Question

所以我试图在我的网页上获取嵌入式YouTube视频片段。我看的每个网站似乎都告诉我这样的答案：

HTML

<div class="video-container"><iframe.......></iframe></div>

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

但我不希望视频占据整个屏幕。当我在html代码中放置一个高度和宽度时，它似乎无法解决它。因此，我尝试将高度和宽度从100％更改为75％，这使得视频更小，但外部视频容器仍然占据了整个宽度空间。

Answer 1

尝试将video-container包裹在另一个div中并在该外部div上设置宽度。

修改您的示例：

<div id="video-wrapper">
  <div class="video-container">
    <iframe></iframe>
  </div>
</div>

video-wrapper的CSS：

#video-wrapper {
  width: 75%;
}

检查出来：http://jsfiddle.net/c34phqgo/