响应式 Youtube

Posted 2023-03-13

【中文标题】响应式 Youtube

【英文标题】：Responsive Youtube

【发布时间】：2016-03-16 10:09:19

【问题描述】：

所以我试图在我的页面上嵌入一个 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%，以使视频更小，但外部视频容器仍占据整个宽度空间。

【问题讨论】：

您是否尝试过在video-container 而不是iframe 上设置宽度？

@Blake Mann 是的，它“裁剪”了视频。

向video-container 添加最大宽度应该可以工作

【参考方案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/