Problem

I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?

I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.

Problem

I want to display an iframe within an image, but have no idea how to do this. Is there a better way than purely positioning with css?

I have a html page that displays other websites, and I would like to display an iframe within the screen of the image below on that page.

• javascript
• jquery
• html
• css

• 1 In the outermost div add position:relative in css and put image and then iframe. For div.iframe the css will be position:absolute – Paramasivan Commented Aug 14, 2014 at 21:07

3 Answers 3

I made the screen a background image and then used a absolute positioned iframe. i added a YouTube iframe to the screen in the demo.

Demo

.outer {
    background-image: url('https://i.sstatic/6hnLq.png');
    width:420px;
    height:365px;
}
.inner {
    position: relative;
    background-color:;
    left: 67px;
    top: 109px;
    width:277px;
    height:150px;
}

............

<div class="outer"><iframe class="inner"></iframe>

you could even use a 2 or 3px border-radius to match the image.

Basically you want to place the iframe in a container that is positioned absolutely. Then place it directly over the image. Here is an example. Please note the iframe link will not work inside of the fiddle due to JS Same origin issues.

http://jsfiddle/weyg1opk/

<div class="image_container">
<img src="https://i.sstatic/6hnLq.png" class="preview_image">
<div class="container">
    <iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>   
</div>

.container {
    position: relative;  
    top: 110px;
    left: 68px
}
.image_container {
    width: 421px;
    height: 365px;
}
.preview_image{
    position: absolute;
}
.iframe_example {
    width: 270px;
    height: 155px;
    z-index: 1000;
}

maybe you can:

• Crop the image into pieces and replace the screen image with a iframe without border and fixed size

or

• Use the monitor as background, and use a div with absolute position to exact match the screen size and position.