html - YouTube の埋め込みが % パラメータで機能しない

Question

わかりましたので、埋め込まれた youtube-clip を % width/height にするのに問題があります。どんな解像度でも同じように見えるウェブサイトを作ろうとしています。

px の代わりに % を使用するにはどうすればよいですか?

<table id="tableframsida" align="center" border="0" height="80%">  
    <tr>
        <td height="100%">
            <h2>HeatoN explains how to think when you're creating tactics</h2>
        </td>
        <td height="100%">
            <iframe width="100%" height="100%" src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>

</table>

Answer 1

必要なレイアウトに関する情報がほとんどないため、要件に合わせて調整できるこの HTML / CSS を提案します。

• iframe のデフォルト値である iframeのwidth=100%andを削除しましたheight=100%
• クラシックなラッピング div + 要素とdisplay:inline-block.

HTML

<div class="videoWrapper">
    <h2>HeatoN explains how to think when you're creating tactics</h2>
    <iframe  src="http://www.youtube.com/embed/UTdFMBReXBw" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper{
    height:600px;
}

.videoWrapper h2, .videoWrapper iframe{
    display:inline-block;
}
.videoWrapper h2{
    word-wrap:;
    width:25%;
}
.videoWrapper iframe{
    width:70%;
}

フィドル