html - Youtube 嵌入不适用于 % 参数

Question

好吧，我无法将嵌入的 youtube-clip 设为 % 宽度/高度。尝试创建一个无论分辨率如何都一样的网站。

如何让他们使用 % 而不是 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 的 width=100% 和 height=100%，这是 iframe 的默认值
• 我将表格显示更改为经典的包装 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%;
}

Fiddle