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
2 Answers
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>