2

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 2

1

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>

0
0

You will need to use styling to overlay the iframe on top of the image. See this answer for more details.

1
  • Anyone know the exact reason for the downvote? The two questions look similar but not exact to me.
    – wigs
    Jan 14, 2015 at 11:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.