CODEWITHSUNDEEP
csshtmlresponsive-design
Jeroen Turksema
Jeroen Turksema

Reputation: 23

Responsive HTML/CSS

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.

Upvotes: 2

Views: 145

Answers (3)

Ravu
Ravu

Reputation: 1

remove padding from all divs,

just keep the last one's

<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>

see here:- http://codepen.io/ravu/pen/oLZZJy

Upvotes: 0

jherrieven
jherrieven

Reputation: 425

Try removing:

padding-bottom: 56.3%;

from the DIV wrapping the JW Player target element (#myElement)

Upvotes: 2

Ashok Mandal
Ashok Mandal

Reputation: 278

I think the best way to do it using CSS , which is http://www.w3schools.com/css/css3_border_images.asp

I think you should try this , i have used it before its quite easy,

Upvotes: 0

Related Questions