Incorporating an Iframe into an Image


I have a web page in which I have an iframe which plays various youtube videos. Now I want this iframe to be display inside an image (The image is basically an iPad Image and I want that the iframe should be embedded inside the screen area of the iPad image). Is it possible to achieve? and if so how can I do that. Any help would be highly appreciated! Thanks

Wrap it in a div, use background image

.frame {
    height: 400px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(

.frame iframe {
  position: relative;
  top: 165px;
  left: 100px;
  width: 250px;
<div class="frame"><iframe src="" /></div>