YouTube video playing inside iPhone

great for screencasts

by smombartz

HTML

<a id="play-video" href="#">
<div id="tv_container">
<iframe id="video" width="960" height="720" src="https://www.youtube.com/embed/P8iZJZBgiVI?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div></a>

CSS

#tv_container {
    width: 960px; /* Adjust TV image width */
    height: 940px; /* Adjust TV image height */
    position: relative;
}
#tv_container:after {
    content: '';
    display: block;
    background: url('http://cl.ly/ZoHe/iPhoneFrame.png') no-repeat top left transparent;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    z-index: 10;
}
#tv_container iframe {
    position: absolute;
    top: 100px; /* Adjust top position */
    left: 0px; /* Adjust left position */
    z-index: 5;
}

JavaScript

$(document).ready(function() {
  $('#play-video').on('click', function(ev) {
 
    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();
 
  });
});