CODEWITHSUNDEEP
cssiframe
brasofilo
brasofilo

Reputation: 26055

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

I really don't have any reference, neither a sample code (searched in Google & SO).
Maybe just haven't found the right keywords.

I believe this can/must be solved with CSS, but my skills with it are minimal...

That said:
I want to "crop" a number of pixels of an iframe.
Top and the bottom at first, but, hey, if I'm gonna ask, left and right too :o)

[update]
What I'd really is a "proof of concept" or at least a starting code to play with...

[concept proven, as per David's answer] 

<!DOCTYPE html>
<html>
<head><title>iframe cropping</title>
    <style type="text/css">
    <!-- 
    #iframeparent{width:700px;height:700px;}
    iframe{margin-top:-40px;width:700px;height:700px;overflow:hidden;border:0px;}
    #iframe-crop{position:absolute;top:0;left:0;border-top:55px solid white;width:710px;height:640px;pointer-events:none;}
    -->
    </style> 
</head>
<body>
    <div id="iframeparent">
        <iframe src="http://docs.google.com/viewer?url=http://www.startupgreece.gov.gr/sites/default/files/geek_agreement_v1.2.pdf"></iframe>
        <div id="iframe-crop"></div>
    </div>
</body>
</html>

Upvotes: 0

Views: 727

Answers (1)

Ashley Strout
Ashley Strout

Reputation: 6258

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

Upvotes: 1

Related Questions