【发布时间】：2015-03-18 22:58:30
【问题描述】：
首先让我说我意识到我对这个特定项目的编码实践不符合标准...我一直在急于完成这个项目（一个忙），稍后会解决这个问题。
我的女朋友 (http://fashiondahlia.com) 有一个 Wordpress 网站，当用户单击顶部菜单栏中的“视频”链接时，我正在使用 Youtube 数据 API 从她的 youtube 频道加载/显示视频。单击链接后，我将加载 PHP 和 JQuery 代码并在当前页面上显示一个半透明的 DIV，当前正在播放的视频（以及与之相关的一些数据）显示在此 div 的左侧，其余的右侧显示的视频。这让我想到了我的问题：
我在将 3 个 div 相互堆叠（在视频 DIV 的左窗格中）时遇到问题，这样它们就不会相互重叠，填充其父 DIV 的整个空间，并调整大小根据设备/浏览器大小（同时保持 youtube 视频的宽高比）；一个 div 包含当前所选视频的视频标题，另一个包含来自 youtube 的实际 iframe/嵌入视频，底部一个包含当前播放视频的说明。
这是我目前用于创建整个合奏的代码（包括当前视频窗格和其他视频列表）：http://pastebin.com/dGNxpftC
...这些是用于保持页面中嵌入的 youtube 视频的纵横比的 CSS 样式：http://pastebin.com/1Zmm5MpQ
我知道我的代码与所有的内联 CSS 都是一团糟，我将在完成项目后解决这个问题。
因此，用于保持视频纵横比的 CSS 样式似乎很明显会影响其下方的“描述”div（溢出到描述上），但我似乎无法弄清楚如何拥有youtube 视频保持其大小比例，同时仍能很好地与它下面的 div 一起播放。标题 div 不是问题，因为它是固定高度。
基本上，我希望 TITLE DIV 具有固定高度，VIDEO DIV 与页面一起调整大小（同时保持其纵横比），底部的 DESCRIPTION DIV 以填充父级的剩余区域DIV（也可以动态调整大小）。这可以做到吗？请帮忙！谢谢！
【问题讨论】：
标签： php html css youtube responsive-design