2
对于我的项目，我需要制作一个响应式表格，其中包含HTML5视频。Responsive HTML/CSS
例子： http://ads.memo2.nl/Jeroen/2016/TVTest.html
<html>
<body>
<head>
<title> :: MeMo2 :: </title>
<style type="text/css">
table {
font-size: 0;
}
</style>
<script src="http://ads.memo2.nl/Jeroen/2016/JWPlayer/jwplayer-7.4.4/jwplayer.js"></script>
<script>jwplayer.key="7lMg3sdALZwtB8ygJTZ/MDB0lyJ+bFuyT7qDEQ==";</script>
</head>
<body>
<div id="tvWrapper" style="margin: 0px auto; width: 100%; transition: all 1s; -webkit-transition: all 1s;">
<div style="width: 100%; margin: 0 auto; position: relative;">
<div style="background: url('http://s28.postimg.org/3xquvgh31/TVtop.png') no-repeat; background-size: 100% 100%; width: 100%; height: 8px; z-index: 2;"></div>
<div style="background: url('http://s28.postimg.org/3py61tzst/TVleft.png') no-repeat; background-size: 100% 100%; float: left; width: 8px; padding-bottom: 56.25%; position: absolute; z-index: 2;"></div>
<div style="float: left; width: calc(100% - 8px); padding-bottom: 56.3%; position: relative; z-index: 1;">
<div id="myElement" style="position: absolute; width: 100%; height: 100%; margin: 0 auto;border: 0;"></div>
<script type="text/JavaScript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "http://ads.memo2.nl/banners/defensie/2016/Veteranendag/Dominique.mp4",
aspectratio: "16:9",
width: "100%",
skin: {
name: "roundster",
active: "#add136",
inactive: "#bbb7b7",
background: "white"
}
});
</script>
</div>
<div style="background: url('http://s3.postimg.org/vzf09qvk3/TVright.png') no-repeat; background-size: 100% 100%; float: right; width: 8px; padding-bottom: 56.25%; position: absolute; right: 0; z-index: 2;"></div>
<div style="background: url('http://s24.postimg.org/fxwbp4pv9/TVbottom.png') no-repeat; background-size: 100% 100%; width: 100%; padding-bottom: 8%; clear: both; z-index: 2;"></div>
</div>
</div>
</body>
</html>正如你可以看到它的反应，不过这台电视机的底部，在浏览器的底部。有没有简单的方法来解决这个问题？
如果我放入一个iFrame，接下来发生的事情是电视机底部正好放在电视机的顶部。
例子： http://ads.memo2.nl/Jeroen/2016/TestingPlz.html
table {
font-size: 0;
}
iframe {
width: 100%;
max-width: 1000px;
min-height: 700px;
}<iframe src="http://ads.memo2.nl/Jeroen/2016/TVTest.html" frameborder="0" scrolling="no"></iframe>我的想法是让iFrame中的电视响应，与TVbottom.png但随后在底部。
为什么不使用引导程序的用户界面？ – Developer