Putting an Image as a Frame Around an Iframe

Putting an image as a frame around an iframe?

Ok first we need to change the html a little. All you need is:

<div id="over">
    <iframe src="http://webfro.gs/south/tour"></iframe>
</div>

Then for the CSS:

#over {
    background-image: url("../images/iphone5_hollow_750x380.png");
    background-repeat: no-repeat;
    height: 380px;
    width: 750px;
    margin: 0 auto 30px;
    position: relative;
}

iframe {
    height: 321px;
    width: 483px;
    position: absolute;
    top: 28px;
    left: 134px;
}

How to set an image as iframe borders in HTML?

You need to set a border style before applying the border-image-source. Otherwise its displaying the image with zero width.

iframe { 
    border:10px solid transparent;
    border-image-source: url(pipe.jpg);
    width:500px;
    height:300px;
}

You may also want to set border-image-slice. This divides up the image to create a border. The image is always sliced into nine sections: four corners, four edges and the middle. -w3schools

thus

iframe { 
    border:10px solid transparent;
    border-image-source: url(pipe.jpg);
    border-image-slice: 10;
    width:500px;
    height:300px;
}

Your border image slice value can be anything greater than 0 however i reckon for best results it should be the image width divided by 3.

JSFiddle Example

how do i create a border around iframe?

If you want to use inline HTML styling:

 <iframe src="https://link_to_my_file/file.pdf" 
    style="width:1000px; height:300px; border: 1px solid black;"></iframe>

How to place an iframe over an image?

<img src="http://southwestarkansasradio.com/images/onair995.jpg"></a><br>
<img src="http://southwestarkansasradio.com/images/playerbackground.jpg" style="z-index:  -1"/>
<div style="position:absolute;left:0px;top:0px;font-size: 32px">
  <iframe width="316" height="216" src="http://southwestarkansasradio.com/NowPlaying.html" border="0" frameborder="0" allowTransparency="true">
      Your browser does not support inline frames.</iframe>
</div>

You have 'display:none' on the div tag that contains the iframe. I tested the above code and it works as you have explained is should.

Embedding an Iframe inside an image

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>

Displaying Iframe on top of image?

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('http://i.stack.imgur.com/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.

Put an iframe behind a photo frame, or How to frame an iframe

I would put a block with a white (or whatever the site's background color) border directly on top of the iframe, and adjust the size of each border based on how much you want to crop. Easiest way to do that would be to put the iframe in a parent element that is positioned relatively (or not static, anyway), then have your block with the cropping border inside that parent element as well, positioned absolutely at top: 0 and left: 0. The cropping block would have to be made the same size as the iframe (does your iframe have a dedicated size?).

Edit: just tried it, and I found out (duh!) that this disables all interactivity with the iframe, because the cropping overlay "absorbs" all events. If that's fine with you, good. If not, you can try the CSS property pointer-events:none;, however this won't work in all browsers. It works in the latest versions of Firefox, Chrome, and IE, but not everyone uses the latest versions of everything.

Demo: http://www.dstrout.net/pub/iframe-crop.htm

Browse Image and Insert into Iframe

Yes, here is an example. The key is to hook onto the iframe and then use its contentWindow.

EDIT

Additionally, I don't know if you meant the browse for file or the drag'n'drop API so I implemented both.

Lots of help from these sources:

file-api : How to interact with the file-api
drag-drop events : Events to key off of when dragging and dropping

And here is a fiddle:

JSFiddle

CSS

 *{
    font-family: Arial;
 }
 .section{
    width: 400px;
    padding: 20px;
    margin: auto;
 }
 #dragDiv{
    background-color: #ffffcc;
 }
 #browseDiv{
    background-color: #ccffcc;
 }
 #iframeDiv{
    background-color: #ffcccc;
 }
 #dropTarget{
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-width: 5px;
 }
 .dropEnabled{
    border-color: #999999;
 }
 .dropEnabled:hover{
    border-color: #ff9933;
 }
 .dropMe{
    border-color: #99ff99;
 }

 /**
  * I set up the listeners for dragging and dropping as well
  * as creating an iFrame for holding dragged in images
  * @returns {undefined}
  */
 function main() {
    // The div that receives drops and the new iFrame
    var targetDiv = document.getElementById("dropTarget"),
            iframe = document.createElement("iframe");

    // Set the iframe to a blank page
    iframe.src = "about:blank";

    // Append it to the target
    document.getElementById("iframeTarget").appendChild(iframe);

    // Drag over is when an object is hovering over the div
    // e.preventDefault keeps the page from changing
    targetDiv.addEventListener("dragover", function(e) {
       e.preventDefault();
       this.className = "dropMe";
    }, false);

    // Drag leave is when the object leaves the div but isn't dropped
    targetDiv.addEventListener("dragleave", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
    }, false);

    // Drop is when the click is released
    targetDiv.addEventListener("drop", function(e) {
       e.preventDefault();
       this.className = "dropEnabled";
       loadFile(e.dataTransfer.files[0], iframe);
    }, false);

    document.getElementById("upload").addEventListener("click", function() {
       var file = document.getElementById("browsedFile").files[0];
       loadFile(file, iframe);
    }, false);
 }

 /**
  * Load a file and then put it on an ifrmae
  * @param {Element} f The file that needs to get loaded
  * @param {Element} destination The iframe that the file is appended to
  * @returns {undefined}
  */
 function loadFile(f, destination) {
    // Make a file reader to interpret the file
    var reader = new FileReader();

    // When the reader is done reading,
    // Make a new image tag and append it to the iFrame
    reader.onload = function(event) {
       var newImage = document.createElement("img");
       newImage.src = event.target.result;
       destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
    };

    // Tell the reader to start reading asynchrounously
    reader.readAsDataURL(f);
 }

 // Run the main script
 window.onload = main;

HTML

<!DOCTYPE html>
<html>
   <head>
      <title>I framed it</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
   </head>
   <body>
      <div id="dragDiv" class="section">
         <div>The div below receives dragged in files</div>
         <div id="dropTarget" class="dropEnabled"></div>
      </div>
      <div id="browseDiv" class="section">
         <div>I upload stuff the boring way</div>
         <input type="file" id="browsedFile"><button id="upload">Upload</button>
      </div>
      <div id="iframeDiv" class="section">
         <div>And below me, an iFrame gets created</div>
         <div id="iframeTarget"></div>
      </div>
   </body>
</html>

And here is the result:

Sample Image

And the DOM:

Sample Image

EDIT

A comment was made about how to do this with videos as well. There are several ways to do it, but here is one way that I would do it using the HTML5 <vido> tag which you can find more information on here: HTML Videos.

One tricky thing that I'm sure is rather cludgy is how to say what kind of file you should be loading. I use a switch() on the file's type attribute which usually evaluates to something like: image/png or video/mp4 for MP4 videos. However, this ties you to a specific file format. A better way to do it would be to make a regular expression that figures out if it's just an image or a video and ignore the format since the process is rougly the same for all files of those types.

I added my own regular expression implementation. Probably, not the best, but it allows all appropriate image types to come through now.

Also, I tried using some sample videos from Apple which can be found here: Sample QuickTime Movies. However, those did not work for some reason. So after that, I just downloaded the sample videos that W3Schools uses in their tutorial. I'm telling you this so that in case you try it and it doesn't work, it might be the file itself and not your code.

Edited loadFile() Function

 /**
  * Load a file and then put it on an ifrmae
  * @param {Element} f The file that needs to get loaded
  * @param {Element} destination The iframe that the file is appended to
  * @returns {undefined}
  */
 function loadFile(f, destination) {
    // Make a file reader to interpret the file
    var reader = new FileReader(),
            loaderFunc = null,
            typeRegEx = /^(\w+)\//,
            contentType = f.type.match(typeRegEx)[1];

    // Figure out how to load the data
    switch (contentType) {
       case "video":
          loaderFunc = function(event) {
             var newVideo = document.createElement("video"),
                     newVideoSource = document.createElement("source");

             newVideo.width = 300;
             newVideo.height = 300;
             newVideo.setAttribute("controls");

             newVideoSource.src = event.target.result;
             newVideoSource.type = f.type;

             destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newVideo);
             newVideo.appendChild(newVideoSource);
          };
          break;
       case "image":
          loaderFunc = function(event) {
             var newImage = document.createElement("img");
             newImage.src = event.target.result;
             destination.contentWindow.document.getElementsByTagName("body")[0].appendChild(newImage);
          };
          break;
       default:
          console.log("Unknown file type");
          return;
    }

    // We should have returned, but just make sure
    if (loaderFunc) {
       // When the reader is done reading,
       // Make a new image tag and append it to the iFrame
       reader.onload = loaderFunc;

       // Tell the reader to start reading asynchrounously
       reader.readAsDataURL(f);
    }
 }

Putting an Image as a Frame Around an Iframe