For my project I need to make an responsive table, with HTML5 video in it.
Example: 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>As you can see it's responsive, but it sets the bottom of the TV at the bottom of the browser. Is there an easy way to fix this?
If I put in a iFrame, the next thing what is happening is that the bottom of the TV is set right under the top of the TV.
Example: 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>My idea is to make the television responsive within the iFrame, but then with the TVbottom.png at the bottom.
