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

Question

我有一个嵌入的 Youtube 视频，它位于 td HTML 元素中。我试图让视频具有其父 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>