I am basically trying to put an html frame within another html page. I tried to open the below site using iframe but no help. Please help me to open this site and also other ways apart from iframe to do this, also I wish to rewrite the html script later in R, so please suggest the suitable approach to follow. Thanks.
<!DOCTYPE html>
<html>
<body>
<base target="_blank">
<iframe>
src="google.com" height="200" width="300"
</iframe>
</body></html>
Update
<!DOCTYPE html>
<html>
<body>
<a href="http://www.google.com" target="_parent"><button>Click me !
</button></a>
</body></html>
This is an example how syntax for iframe looks.
<iframe width="100%" height="100%" src="https://www.google.co.za/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
cant be implemented correctly since google not allowed in frame.
This would work for example :
<iframe width="100%" height="100%" src="https://www.rdocumentation.org/" frameborder="0" scrolling="auto" allowfullscreen>
</iframe>
R syntax:
iframe(width, height, url_link) //syntax
iframe(width = "560", height = "315", url_link = "https://www.youtube.com/embed/0fKg7e37bQE") //example
Here is the R documentation.
https://www.rdocumentation.org/packages/shinyLP/versions/1.1.0/topics/iframe
EXTRA
Read this about adding custom search from google Click Me
Implementing any fully functional website
To use the iframe in full perspective of the browser ill give you an example using your code:
Also included an button tag to open and close iframe.
$(document).ready(function() {
$(".btn").click(function() {
$("#frame").toggle();
});
});
.btn {color: black; background-color: #eee; height: 50px; width: 200px; border-radius: 10px;border-color: #96bdd9;box-shadow: inset 0 1px 0 #f4f8fb; margin-bottom: 20px;outline: none;}
.test {position: fixed; width: 100%; height: 100%; }
.test iframe { width: 100%; height: 100%; border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<button class="btn" >Iframe Open & close</button>
<div class="test">
<iframe id="frame" style="display: none;" width="100%" src="https://getbootstrap.com/" frameborder="0" scrolling="auto">
</iframe>
</div>
</body>
</html>
You can’t show Google in an iframe.
You also can’t show Yahoo!, Twitter or Facebook in an iframe.
Most major sites and banks block this ability through the use of
X-Frame-Options: DENY
Read more here
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Related
My application was in VML which allowed me to embed html between VML tags. But VML only supports till IE-8. Now I have converted VML to SVG using vectorconverter. But SVG doesn't allows to embed html tag between the SVG tags. After searching on stack and google I came across for using foreignobject tags, However it also only supports till IE-8. I also tried using switch tag placing above foreignobject tags but it to did not worked. Is there any way where I can embed the html code between SVG tags ie below. Thanks in advance
<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>
<svg width="500" height="300" style="border:1px red solid">
<switch>
<foreignobject class="node" x="46" y="22" width="100" height="100">
<div style="border:1px green solid">I'm a div inside a SVG.</div>
</foreignobject>
</switch>
</svg>
<div>Interesting! But you a Foreign Object.</div>
</body>
You can achieve this using CSS only. See the attached jsFiddle. I have left your example in for reference above the html/css implementation.
https://jsfiddle.net/Lwtb9w5s/
<div class="container">
<div class="inner">
<span>I'm a div inside a SVG.</span>
</div>
</div>
.container {
height: 300px;
width: 500px;
border:1px red solid
}
.inner {
border:1px green solid;
position: relative;
top: 22px;
left: 46px;
width: 100px;
}
Your question is a duplicate of: is it possible to append a div inside svg element
You can't append HTML to SVG (technically you can with foreignObject, but it's a rabbit hole). Furthermore, visible elements in SVG can't be nested, so elements such as circle, rect, path and such can't have children elements.
with Google Drive you may embed videos in your website with the tag:
<**iframe src="https://drive.google.com**/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless></iframe>
on the Top Right there is a Gray Box. This takes you to the download / embedding GoogleDrive page. I'd like to stop that.
Anyone one knows how to hide it?
Or at least how to mask it with a customs CSS?
this is what I get by inspecting the element in the div:
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Thank you Thomas! Good Idea!
The following does the job for me.
The pop-out is not hidden (it hides itself after few seconds) but it stays inaccessible.
I think it is the least ugly solution.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/LINKTOMYFILE/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
PS
The "opacity: 0" is a workaround for Mozilla
You can also masking the pop-out button with whatever image you like using above code. Make sure the size of the masking image is 48x48 pixel and transparent background. Here is the modified version of the code.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/1MfhMdv4mw_20UWENUSt1PzmU7IQVpCXf/preview" width="640" height="360" allow="fullscreen" frameborder="0" scrolling="no" seamless="">
</iframe>
<div style="width: 48px; height: 48px; position: absolute; right: 6px; top: 6px;">
<img src="https://i.ibb.co/bJNBHXp/guitar-1.png">
</div>
</div>
It should be like this. I hope it's working.
<div style="width: 640px; height: 480px; position: relative;">
<iframe src="https://drive.google.com/file/d/0BxLbnVHP6GWpV2ZIZEc4SkNTOTQ/preview" width="640" height="480" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
</div>
You can't prevent it from popping out as that's something Google implemented. You also can't change the button normally as it's Google's page and you can't modify it.
You can't "reach" into the page loaded by an iframe and modify it, unless you have cross-site scripting enabled on the child page (google's page), and Google would never allow that for security reasons. If that would be able I could serve people a Google Drive page but for example modify the download button to download malware.
The only solution would be to place a div over the iframe, on top of the button. But still, it's not really pretty and usually frowned upon. Google offers the service for free so they determine how people use it.
If you run the example below, look at the red box at the top right corner.
Something like:
.hidebtn {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #FFF;
background: #FF0000;
position: absolute;
right: 50px;
top: 50px;
}
<div class="hidebtn">button</div>
<iframe src="https://www.example.com" frameborder="0" width="100%" height="500"></iframe>
For me the answer by u32i64/asd worked well to stop the icon being clickable. To get rid of the black bars too i changed the code to this:
<div class="responsive-container">
<iframe src="https://drive.google.com/file/d/1Fy4AwZZVF-DLAenTSxQl93icdXfef/preview" frameborder="0" scrolling="no" seamless=""></iframe>
<div style="width: 80px; height: 80px; position: absolute; opacity: 0; right: 0px; top: 0px;"> </div>
Make sure the http address ends with 'PREVIEW')
Important You have to add this to your 'additional CSS':
.responsive-container {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.responsive-container iframe, .responsive-container object, .responsive-container embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
A simple option is to avoid popups using sandbox parameter and allowing just options that need google drive to reproduce the video:
<iframe src="https://drive.goo..." sandbox="allow-same-origin allow-scripts"></iframe>
It doesn't hide the button, but it prevents the iframe to popup a new window so the button becomes useless.
Thanks s1h4d0, It worked for me, maybe in terms of programming it is not the best, but it works and I thank you.
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><div class="hidebtn"><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
If the above code doesn't work, add the inside the div and then add the image, do it like this:
.hidebtn {
width: 60px;
height: 60px;
position: absolute;
right: 5px;
top: 5px;
background: #000000; /*remove this if you want to put only the logo.*/
}
<div class="hidebtn"><iframe src="https://drive.google.com/file/d/1O71QlISu_yRvT5Q1_h3S8OHocjgpuhIx/preview" frameborder="0" width="100%" height="500"></iframe><img src="https://mungowarez.net/wp-content/uploads/2020/10/44918-O48GVC-01-2.png"></div>
I figured it out. Change the drive.google.com in the URL to googledrive.com and some other changes:
Get the unique video identifier (0B6VvIWR7judDX25yUGxVNERWUj)
Put into this html:
<body oncontextmenu="return false;">
<video src="http://googledrive.com/host/0B6VvIWR7judDX25yUGxVNERWUj" controls width="100%" height="auto"></video>
</body>
The "body oncontectmenu" simply removes the ability to right-click anything on the screen, because without this you can right click the video and download the file. Of course the right click ability is removed from the whole page and people can still find the file by inspecting the page source.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
There is a more simple method of blocking the pop-out on googledrive video's and docs,
Wherever you are placing the html,inline frame or lightbox on your website page, insert a rectangular shape and place it over where you want to block the pop-out.
Next- click on the shape to get it's properties, there you should find a number of options
clear all the other options, unless you want to insert your own link or logo, make the the shape transparent, if you have the option of showing a border line I would advise keeping this to 1 setting until you have covered the position of the pop-out, once you have found the correct position, remove the border line and lock it in place. this works as I have used this method many times to block out links that appear on video's and documents, it is simple and does not require the use of any code. This method will only work if you have set the dimensions of your document or video, once you done all that test your video or document, you will find that the icon still appears but unable to click on it. you can use this method to stop the user gaining access to your information or a third party website which takes them away from your page. this method can also be used for preventing someone right clicking over your video or documents and photographs, if they try to copy it, a black box is all they will get. however,you may still get the info from elements/source code.
I tried the previous suggestions and they did not work because "Google Drive refused to connect".
I came up with a completely different approach to solve the original problem (to avoid "download / embedding GoogleDrive page"), which is very simple:
Create a Google Slides presentation, insert in a slide the video you have in Google Drive.
Select File - Publish to the web - Embed, and copy the code that is generated.
In Google Sites, select Embed - Embeded code, and paste it there.
This solution provides also more options that you control in Slides for the videos, such as automatic playing, select timing of the video, etc.
<div class="drive-viewer-popout-button drive-viewer-dark-button goog-inline-block drive-viewer-button" role="button" tabindex="0" data-tooltip-unhoverable="true" data-tooltip-delay="500" data-tooltip-class="drive-viewer-jfk-tooltip" data-tooltip-align="b,c" data-tooltip-offset="-6" aria-label="Pop out" data-tooltip="Pop out" style="-webkit-user-select: none;">
<div class="drive-viewer-icon drive-viewer-nav-icon">
</div></div>
Mano Souza · RIO DE PEDRAS.hmtl
I am trying to align YouTube embedded video in the center of the page in my bootstrap page. The size of the video is always the same.
My html looks really simple:
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
I tried different solutions from stackoverflow (which addressed just centering a div, not a video) and the best I was able to came up with was this fiddle.
I already tried solution1, solution2, solution3 but with no result. Another partially successful solution was to use:
width: 50%;
margin: 0 auto;
It worked nicely on desktop, but failed on iPad or a phone (the video went partially outside of a screen). How is it possible to center the video properly in desktop/tablet/phone?
An important thing to note / "Bootstrap" is just a bunch of CSS rules
a fiddle
HTML
<div class="your-centered-div">
<img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>
CSS
/* key stuff */
.your-centered-div {
width: 560px; /* you have to have a size or this method doesn't work */
height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
position: absolute; /* positions out of the flow, but according to the nearest parent */
top: 0; right: 0; /* confuse it i guess */
bottom: 0; left: 0;
margin: auto; /* make em equal */
}
Fully working jsFiddle is here.
EDIT
I mostly use this these days:
straight CSS
.centered-thing {
position: absolute;
margin: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
if your use stylus/mixins ( you should... it's the best )
center-center()
absolute()
margin auto
top 50%
left 50%
transform translate(-50%,-50%)
This way... you don't need to know the size of the element - and the translate is based of it's size - So, -50% of itself. Neat.
Youtube uses iframe.
You can simply set it to:
iframe {
display: block;
margin: 0 auto;
}
<iframe style="display: block; margin: auto;" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>
You dont have to put <iframe> in a parent div at all. You can target exactly youtube iframe with CSS/3:
iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
display: block;
margin: 0 auto;
}
I set the max width for my video to be 100%. On phones the video automatically fits the width of the screen. Since the embedded video is only 560px wide, I just added a 10% left-margin to the iframe, and put a "0" back in for the margin for the mobile CSS (to allow the full width view). I did't want to bother putting a div around every video...
Desktop CSS:
iframe {
margin-left: 10%;
}
Mobile CSS:
iframe {
margin-left: 0;
}
Worked perfect for my blog (Botanical Amy).
Using Bootstrap's built in .center-block class, which sets margin left and right to auto:
<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
Or using the built in .text-center class, which sets text-align: center:
<div class="text-center">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>
<div>
<iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> .
</iframe>
</div>
<script>
function myFunction() {
var wscreen = window.innerWidth;
var hscreen = window.innerHeight;
document.getElementById("myFrame").width = wscreen ;
document.getElementById("myFrame").height = hscreen ;
}
myFunction();
window.addEventListener('resize', function(){ myFunction(); });
</script>
this works on Vimeo adding an id myFrame to the iframe
make iframe with align="middle" and put it in paragraph with style="text-aling:center":
<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>
For a fully responsive IFramed YouTube video, try this:
<div class="blogwidevideo">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
.blogwidevideo {
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.blogwidevideo iframe {
left:10%; //centers for the 80% width - not needed if width is 100%
top:0;
height:80%; //change to 100% if going full width
width:80%;
position:absolute;
}
<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>
It seems to work, is this all you were asking for? I guess you could go about taking longer more involved routes, but this seemed simple enough.
The easiest way is by adding tag, before , open the tag and then close it after closing . As said by others tag is not supported by HTML5, and even your ide would show an error. I'm using VS Code and yes it shows an error, but if you check your website the video would be in the center. Youtube still understands the tag :)
This iframe's width and height won't change. I want responsive design. Please help.
Now:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="300"
height="300">
Modified 500x500 - not working, still 300x300:
<iframe src="http://www.kadinvekadin.net/mod-burclar.php"
frameborder="0"
scrolling="no"
width="500"
height="500">
for a pure CSS solution you need to wrap your iframe around a container and apply styles to it, for more details please see http://andmag.se/2011/11/responsive-embeds/
Another option is using jquery
please take a loom at https://gist.github.com/aarongustafson/1313517
Try this code,
<html>
<body>
<style>
html,body {height:100%;}
.wrapper {width:80%;height:100%;margin:0 auto;background:#CCC}
.iframe1 {position:relative;}
.iframe1 .ratio {display:block;width:100%;height:auto;}
.iframe1 iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
</style>
<div class="wrapper">
<div class="iframe1">
<img class="ratio" src="sometransparentimage.jpg"/>
<iframe src="http://www.kadinvekadin.net/mod-burclar.php" frameborder="0"
allowfullscreen></iframe>
</div>
</div>
</body>
</html>
So, the problem I face is like this:
I have a layer, which it will be placed on top of a pdf on the page. The PDF is either using to embed, or iframe to include it. However, CSS style doesn't apply on PDF (because it is a plug-in? ). Therefore, even I put z-index:1000 for the , that layer still goes behind the PDF. any idea how to fix that?
here is th code:
<style type="text/css">
<!--#apDiv1 {
position:absolute;
left:543px;
top:16px;
width:206px;
height:223px;
z-index:1000;
background-color:#999999;
}
</style>
<body>
<!-- embed the pdf -->
<object data="test.pdf" type="application/pdf" width="600" height="500" style="z-index:1" wmode="opaque">
alt : test.pdf
</object>
<!-- layer -->
<div id="apDiv1" >Whatever text or object here.</div>
</body>
After reading some forums... (here some comments)
The PDF is loaded by the Acrobat Reader plugin. It kind of does it's own thing and has nothing to do with any of the HTML or even the browser for that matter (apart from being loaded by the browser).
People have the same problem with the Flash plugin, and there's no solution for that. So I would imagine there's no solution for this either.
Your best bet is to redesign your menus so they don't move into the space occupied by the pdf.
If it is a plugin, then you cannot reliably place other elements over the top of it. Browsers usually let go of most of their ability to 'layer' elements when plugins are involved.
The there is no direct support for overlaying 'z-indexing' a div either in the Api or Dom. The plug-in loads an executable file that, in very simple terms, punches a hole in the browser window. Using the 'iframe shim' technique is the standard workaround although transparency can be tricky.
My SOLUTION:
Two iframes, each one inside a div with different z-index, when you click the yellow div, the empty iframe is displayed (in front of the pdf iframe), so you can see the green div inside the pdf document.
<html>
<head>
<script type="text/javascript">
function showHideElement(element){
var elem = document.getElementById(element);
if (elem.style.display=="none"){
elem.style.display="block"
}
else{
elem.style.display="none"
}
}
</script>
</head>
<body>
<div style="position:absolute;height:100px;width:100px;background-color:Yellow;" onclick="showHideElement('Iframe1');">click me</div>
<div style="position:absolute;z-index:100;background-color:Green;height:100px;width:100px;margin-left:200px;"></div>
<div style="position:absolute;z-index:20;margin-left:200px;">
<iframe visible="true" id="Iframe1" height="100" width="100" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
<div style="position:absolute;z-index:10;margin-left:100px;">
<iframe visible="true" id="ipdf" src="http://www.irs.gov/pub/irs-pdf/fw4.pdf" height="1000" width="1000" runat="server" frameborder="0" scrolling="auto" >
</iframe>
</div>
</body>
</html>
Fernando Rodríguez
frodale#gmail.com
There is a jquery plugin, bgiframe, that makes implementing this fix fairly simple.
Generally you can get around these z-index issues by placing an iframe shim directly under the div. That is, it has the same size and location (but no actual content). I'm not 100% sure this works for PDFs, but I know this fixes some other z-index issues (such as select boxes on IE6).
iframe shims can be a pain if you're placing the div dynamically, since you have to move the iframe shim with it.
I just found a solution to this. Use the google pdf viewer in the iframe to display your pdf on the page then it works like any other div.
example:
<iframe id="ifr"
src="http://docs.google.com/gview?url=http://www.mysite.com/test.pdf&embedded=true"
style="width:718px; height:700px;"
frameborder="0">
If it's IE your testing, then it could be the same issue as with ComboBox. Try inserting iframe into div.
A solution for some circumstances is to wrap the iframe with a div and use the style attribute 'clip' on the div, or iframe parent.
<!DOCTYPE html>
<html>
<head>
<title>Test Page - IFramed PDF Document Clipping</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type='text/javascript'></script>
<style type='text/css'>
body {padding:0em;margin:0em;font-size:16px;position:relative;}
body * {line-height:1em;}
#TOPNAV {list-style:none;display:block;}
#TOPNAV li {display:inline;}
#IFRAMEWRAPPER
{
display:block;margin:0em;padding:0em;
position:fixed;width:auto;left:0.125em;right:0.125em;top:4.125em;bottom:0.125em;
}
#docFrame {width:100%;height:100%;position:relative;margin:0em;padding:0em;}
input.ACTIVE {background-color:Gray;outline:0.125em solid silver;}
.clearfix {zoom:1;}
</style>
<script type='text/javascript'>
$(document).ready(function () {
$('#TOPNAV input').click(function () {
$("#TOPNAV input.ACTIVE").toggleClass('ACTIVE');
$(this).toggleClass('ACTIVE');
$("#IFRAMEWRAPPER").css("padding", "1em");
$("#IFRAMEWRAPPER").css("padding", "0em");
$("#IFRAMEWRAPPER iframe").toggleClass("clearfix");
$("#IFRAMEWRAPPER").toggleClass("clearfix");
$("#IFRAMEWRAPPER").hide();
$("#IFRAMEWRAPPER").slideDown(2);
});
$('#btnCLICK1').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, auto, 5em)");
});
$('#btnCLICK2').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, 5em, auto, auto)");
});
$('#btnCLICK3').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(5em, auto, auto, auto)");
});
$('#btnCLICK4').click(function () {
$("#IFRAMEWRAPPER").css("clip", "rect(auto, auto, 5em, auto)");
});
});
</script>
</head>
<body>
<div class='TOPNAVWRAPPER'>
<ul id='TOPNAV'>
<li><input type='button' id='btnCLICK1' value='RIGHT' /></li>
<li><input type='button' id='btnCLICK2' value='LEFT' /></li>
<li><input type='button' id='btnCLICK3' value='BOTTOM' /></li>
<li><input type='button' id='btnCLICK4' value='TOP' /></li>
</ul>
</div>
<div id="IFRAMEWRAPPER">
<iframe id='docFrame' name='TargetFrame' src="YOUR-PDF-DOCUMENT.pdf" onloadeddata='' seamless='seamless' ></iframe>
</div>
</body>
</html>