I just switched to HTTPS on my website. I had been displaying a locally hosted PDF via an iframe; the iframe displays a small html file with the PDF embedded (as an object) in it. However, the PDF is no longer displaying. I can navigate to the PDF & it displays just fine but does not display when I load the html page. What can I do to make the PDF display?
iframe
<iframe src="/updates/update.htm" width="100%" height="800px"
marginheight="0" frameborder="0"></iframe>
update.htm
<html>
<header>
<link rel="stylesheet" href="custom-styles.css">
</style>
</header>
<body>
<object src="update.pdf"
type="application/pdf" width="100%" height="800px"><div id="show-text">
<p>It appears your web browser is not configured to display PDF files.</p>
<p><a href='update.pdf'>Click here to download the PDF file.</a></p>
</div>
</object>
</body>
</html>
custom-styles.css
#show-text {
display: block;
width: 100%;
height: 15%;
background: #D1D1D1;
}
Shot in the dark here, but are you sure that "/updates/update.htm" is the right path? If your page is www.site.com/something/index.php and you use that path, the browser will look for www.site.com/something/updates/update.htm. Perhaps you want www.site.com/updates/update.htm. Maybe you need a relative path like "../updates/update.htm"
UPDATE
Try <object data="update.pdf">. The <embed> tag uses scr=; <object> uses data= according to w3schools.
Related
I'm new to code and I want to implement a code that puts the youtube live chat onto the page. Right now it is refusing to connect.
Here is my code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<iframe id="pewdiepie" height="80px" width="300px" frameborder="0" src= "https://akshatmittal.com/youtube-realtime/embed/#!/UCq-Fj5jknLsUf-MWSy4_brA" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe id="tseries" height="80px" width="300px" frameborder="0" src="https://akshatmittal.com/youtube-realtime/embed/#!/UC-lHJZR3Gqxm24_Vd_AJ5Yw" style="border: 0; width:300px; height:80px; background-color: transparent;"></iframe>
<p>
<iframe height="500" width="300" src="https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=<MY_IP>" style="border: 0; width:300px; height:100px; background-color: transparent;"></iframe>
</body>
</html>
Is there anything wrong with the code? And how I can fix it? By the way I hid my IP address.
To embed a youtube live chat, the link must be like this:
"https://www.youtube.com/live_chat?v=<id_video>&embed_domain=<your_domain>"
So, to embed your chat on stackoverflow, it will be:
"https://www.youtube.com/live_chat?v=UVxU2HzPGug&embed_domain=www.stackoverflow.com"
EDIT :
Here is the official documentation from google.
During a live stream, you can embed live chat on your own side by using an iframe.
Get the video ID for the live stream. You can get the video ID from the watch page URL (youtube.com/watch?v=12345). In this case, the video ID is ‘12345’.
If you chose "Stream now," right-click on the player and select Copy video URL to get the video URL.
Get the domain URL for the site you want to embed chat on. If you're embedding chat on www.example.com/youtube_chat, your embedding domain is "www.example.com."
Combine the embedded URL in the following way: https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com.
This is the URL for your iframe. Note the embed_domain must match the the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.
I'm pretty new to coding, and am trying to make a small chrome extension that displays my gmail in an Iframe. I'm having several problems: I have to sign in with google inside my Iframe, and the gmail will refuse to display when I try loading the extension. Keep in mind, the iframe works fine with websites like "https://ifunny.co", but it will refuse to work with anything Google.
My html box that pops up with the click of the extension button:
<!DOCTYPE html>
<html>
<!---body>
<iframe src="https://ifunny.co" style="border:2px solid black;" height="500" width="350"></iframe>
</body--->
<body>
<iframe src="https://mail.google.com" style="border:2px solid black;" height="500" width="350" name="myIframe" id="myIframe"></iframe>
</body>
</html>
<head>
<style>
iframe#hiddenframe {
display: none;
}
</style>
</head>
<body>
<iframe src="" id="hiddenframe"></iframe>
<img src="portait.jpg">
Launch!
</body>
So when I click the link, the rocket launches, but I stay on the page, keeping my eyes on the portrait. At least this is how it works on Chrome. Firefox still displays the blank page I loaded with "/?action=launch_rocket". I do not want to see the blank page. I want to keep looking at the portrait.
Our facility enforces using Firefox. Is there a smarter way of achieving what I want?
You need to set the name of the iframe.
...
<iframe src="" id="hiddenframe" name="hiddenframe"></iframe>
...
I've been working on having multiple pdf documents inside a single html page using iFrames. I figured how to insert pdfs inside iFrames but I've been curious if it's possible to add a pdf to an iFrame while showing all the pdf pages; that is, the iframe should display all the pdf content without a vertical scroll bar.
Thanks, Y_Y
<iframe src="mydoc.pdf" width="100%" height="800px"></iframe>
I don't think you can show all pages, unless you make the height property large enough to show all pages. You would have to make the height big enough (proportionally) to show all pages based on the width of the iframe.
IFRAME
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>
Object
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
I have an issue with a page browsing with Google chrome. When Google chrome plugin 'Chrome PDF Viewer' is disabled, the PDF being display overlaps every object. Below is a sample code.
<html>
<head>
</head>
<body>
<div style="border: solid red 2px; position:absolute;z-index:100;background-color:Green;height:100px;width:250px;"></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>
Any suggestion will be helpful.
Do you think it works any better e.g. in Internet Explorer with Adobe Reader plugin?
As far I know it has the same issue and you have to use another iframe for overlay areas.