使嵌入视频使用所有可用的HTML元素宽度

Question

我有一个嵌入在td HTML元素中的Youtube视频。我试图让视频具有其父td元素的宽度，但仍然保持其宽高比（宽高比调整高度）。

我试图让视频大小看起来像这样：

我的问题是视频看起来像这样：

如何使用CSS让视频向上扩展以使用td元素的所有可用宽度仍然保持其宽高比？

继承我的代码，继承我的JSFiddle example：

<table width="100%">
    <tr valign="top">
        <td>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </td>
        <td style="width: 450px;">
            <!-- Note the Youtube video is loaded using the Youtube Javscript API-->
            <iframe src="https://www.youtube.com/embed/zrWkRHSK6A8?enablejsapi=1" style="width: auto; height: auto;"></iframe>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </td>
    </tr>
</table>

Answer 1

只需给iframe一个最大宽度，并使用基于百分比的宽度应用td！

JSFIDDLE

<table width="100%">
    <tr valign="top">
        <td>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </td>
        <td style="width: 50%;">
            <!-- Note the Youtube video is loaded using the Youtube Javscript API-->
            <iframe src="https://www.youtube.com/embed/zrWkRHSK6A8?enablejsapi=1" style="max-width: 100%;height: 100%;"></iframe>
        </td>
        <td>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </td>
    </tr>
</table>

Answer 2

我认为这个JSFIDDLE会给你一些关于如何调整视频大小的基本想法，同时坚持它的宽高比（不是我的小提琴）。

有一篇关于它的文章here，您可能希望看一下。

基本上，他所做的是添加一个虚拟<div>并使用padding-top:75%;（该值适用于宽高比为4：3。您必须调整它以适合您所需的宽高比）。

希望有所帮助。

Answer 3

如果您知道视频的宽高比，则可以使用the Intrinsic Ratios for Video technique outlined on A List Apart。

基本上，您在div元素中添加了td。设为position: relative并使用padding使其成为正确的高度，例如对于16：9（25px控制条）：

div.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

将youtube iframe放入div中，并在其上设置position: absolute; top: 0; left: 0; height: 100%; width: 100%;，例如

iframe[src*=['youtube.com/embed/'] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}