Make a responsive TV in HTML5

by on under Code snippets
3 minute read

Here’s the TV frame that we want to put our video in: tv
The HTML:

<div class="TVwrapper">
    <div class="TVtop"></div>
    <div class="TVleft"></div>
    <div class="stream">
           <!-- Put your embed code here, but do not declare width and height -->
           <iframe src="http://www.youtube.com/embed/inKWORx42Ns" frameborder="0"></iframe>
        </div>
    <div class="TVright"></div>
    <div class="TVbot"></div>
</div>

*The embed code that youtube gave me behaved strange. I had to get the link manually and put it into an iframe.
CSS:

.TVtop{
    background: url('TVtop.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 8px;
    z-index: 2;
}
.TVbot{
    background: url('TVbottom.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    padding-bottom: 8%;
    clear: both;
    z-index: 2;
}
.TVleft{
    background: url('TVleft.png') no-repeat;
    background-size: 100% 100%;
    float: left;
    width: 8px;
    padding-bottom: 56.25%;
    position: absolute;
    z-index: 2;
}
.TVright{
    background: url('TVright.png') no-repeat;
    background-size: 100% 100%;
    float: right;
    width: 8px;
    padding-bottom: 56.25%;
    position: absolute;
    right: 0;
    z-index: 2;
}
.stream{
    float: left;
    width:100%;
    width: calc(100% - 8px);
    padding-bottom: 56.3%;
    position: relative;
    z-index: 1;
}
.stream iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.TVwrapper{
    width:100%;
    margin: 0 auto;
    position: relative;
    /* optional */
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

The hardest part if you want to make a responsive TV in HTML5 is to cut the TV in 4 pieces.
Working example below:

code snippet, image, code, tv, stream, tv frame, html, css, html5
comments powered by Disqus