1

我有一个嵌入的 Youtube 视频，它位于tdHTML 元素中。我试图让视频具有其父td元素的宽度，但仍保持其纵横比（纵横比调整高度）。

我试图让视频大小看起来像这样： 在此处输入图像描述

我的问题是视频看起来像这样： 在此处输入图像描述

如何使用 CSS 使视频放大以使用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: 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>
4

3 回答 3

1

只需给 iframe 一个 max-width 并应用基于百分比的宽度的 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>
于 2013-06-27T10:43:48.733 回答
0

如果您知道视频的纵横比，则可以使用A List Apart 中概述的视频固有比率技术。

基本上，您将 adiv放在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%;
}
于 2013-06-27T10:53:21.803 回答
0

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

这里有一篇关于它的文章，你可能想看看。

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

希望有帮助。

于 2013-06-27T10:47:44.433 回答