1

tdHTML 要素内に埋め込まれた Youtube Video があります。ビデオに親要素の幅を持たせようとしていますがtd、アスペクト比を維持しています (アスペクト調整された高さ)。

ビデオのサイズを次のようにしようとしています。 ここに画像の説明を入力

私の問題は、ビデオが次のようになっていることです。 ここに画像の説明を入力

tdCSS を使用してビデオを拡大し、要素の使用可能なすべての幅を使用するようにするにはどうすればよいですか?

Heres私のコードと heres 私の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 に最大幅を指定し、パーセンテージ ベースの幅で 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

このJSFIDDLEは、アスペクト比を維持しながらビデオのサイズを変更する方法についての基本的なアイデアを提供すると思います (フィドルは私ではありません)。

ここにそれに関する記事がありますので、ぜひご覧ください。

基本的には、ダミー<div>を追加して使用しますpadding-top:75%;(値はアスペクト比 4:3 の値です。目的のアスペクト比に合わせて調整する必要があります)。

それが役に立ったことを願っています。

于 2013-06-27T10:47:44.433 に答える