iframe with screen border/background based on technique by Evan on Stackoverflow: https://stackoverflow.com/a/25573922/3594287

example-markup.html

<div class="tv-outer-container">
    <div class="tv-inner-container">
        <iframe width="640" height="360" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

example-style.css

.tv-outer-container {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 543px;
    margin: 0 auto;
}
.tv-inner-container {
    position: relative;
    padding-top: 25px;
    padding-bottom: 87.5%;
    height: 0;
}
.tv-inner-container iframe {
    box-sizing: border-box;
    background: url(https://i.imgur.com/MdhjPiY.png) center center no-repeat;
    background-size: contain;
    padding: 3% 5.5% 33%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

original-example-markup.html

<div>
    <div>
        <iframe width="560" height="315" src="//www.youtube.com/embed/f890SC1schE" frameborder="0" allowfullscreen></iframe>
   </div>
</div>

original-example-style.css

div {
    width: 100%;
    height: 100%;
    max-width: 1034px;
    max-height: 543px;
    margin: 0 auto;
}
div div {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
}
div iframe {
    box-sizing: border-box;
    background: url(http://i.stack.imgur.com/zZNgk.png) center center no-repeat;
    background-size: contain;
    padding: 11.9% 15.5% 14.8%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}