Incorporating an Iframe into an Image

advertisements

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 {
    width:400px;
    height: 400px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url(http://want2scrap.com/store/images/large/Cat%20Frame%20DC_LRG.jpg)
}

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